<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang=en>
 <head profile="http://www.w3.org/2006/03/hcard"><meta
  content="text/html; charset=utf-8" http-equiv=Content-Type>

  <title>CSS Grid Template Module</title>
  <link href="../default.css" rel=stylesheet type="text/css">
  <link href="https://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
  type="text/css">

  <style type="text/css">
   .example .visible {border: thin dotted silver}

    /* delete this block when you've cleared out all the .replaceme elements */
    .replaceme {
      border: solid red;
      padding: 0 0.5em;
      margin: 0 0.1em;
      background: yellow;
      color: green;
    }
    .replaceme:before {
       content: "FIXME(";
       color: black;
    }
    .replaceme:after {
       content: ")";
       color: black;
    }
  </style>

 <body>
  <div class=head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="https://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   <h1>CSS Grid Template Module</h1>

   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 February
    2012</h2>

   <dl>
    <dt>This version:

    <dd><a
     href="http://www.w3.org/TR/2012/ED-css3-grid-template-20120223/">http://www.w3.org/TR/2012/ED-css3-grid-template-20120223/</a>
     

    <dt>Latest version:

    <dd><a
     href="http://www.w3.org/TR/css3-grid-template/">http://www.w3.org/TR/css3-grid-template/</a>
     

    <dt>Editor's draft:

    <dd><a
     href="http://dev.w3.org/csswg/css3-grid-template/">http://dev.w3.org/csswg/css3-grid-template/</a>
     

    <dt>Previous version:

    <dd><a href="http://www.w3.org/PreviousVersionURI">
     http://www.w3.org/PreviousVersionURI</a>

    <dt>Issues List:

    <dd><a
     href="http://www.w3.org/Style/CSS/Tracker/products/FIXME">http://www.w3.org/Style/CSS/Tracker/products/FIXME</a>
     

    <dt>Discussion:

    <dd><a
     href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
     with subject line &ldquo;<kbd>[<!---->css3-grid-template] <var>&hellip;
     message topic &hellip;</var></kbd>&rdquo;

    <dt>Editors:

    <dd class=vcard><span class=fn>[editor1 name]</span>, <span
     class=org>[affiliation (opt.)]</span>, <span class=email>[email address
     (opt.)]</span>

    <dd class=vcard><span class=fn>[editor2 name]</span>, <span
     class=org>[affiliation (opt.)]</span>, <span class=email>[email address
     (opt.)]</span>
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2012 <a
    href="http://www.w3.org/"><abbr
    title="World Wide Web Consortium">W3C</abbr></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><abbr
    title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
    href="http://www.ercim.eu/"><abbr
    title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
    <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p>CSS is a language for describing the rendering of structured documents
   (such as HTML and XML) on screen, on paper, in speech, etc. This module
   contains the features of CSS level&nbsp;3 relating to <var
   class=replaceme>DESCRIBE HERE</var>. It includes and extends the
   functionality of CSS level&nbsp;2 <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS
   level&nbsp;1 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>.
   The main extensions compared to level&nbsp;2 are <var
   class=replaceme>SUMMARIZE HERE</var>.

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p>This is a public copy of the editors' draft. It is provided for
   discussion only and may change at any moment. Its publication here does
   not imply endorsement of its contents by W3C. Don't cite this document
   other than as work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a
   href="mailto:www-style@w3.org?Subject=%5Bcss3-grid-template%5D%20PUT%20SUBJECT%20HERE">
   www-style@w3.org</a> (see <a
   href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
   discussion of this specification. When sending e-mail, please put the text
   &#8220;css3-grid-template&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-grid-template<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a href="/Style/CSS/members">CSS
   Working Group</a> (part of the <a href="/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
   Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
   W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p>The following features are at risk: &hellip;

  <p class=issue>Leave for next level or different module: chaining regions,
   page templates, repeat (automatically add) columns and rows, style
   fragments of elements that are in a certain slot (region-based styling).

  <h2 class="no-num no-toc" id=contents> Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#intro"><span class=secno>1. </span> Introduction</a>
    <ul class=toc>
     <li><a href="#grid-intro"><span class=secno>1.1. </span> Introduction to
      Grids</a>

     <li><a href="#background"><span class=secno>1.2. </span> Background</a>

     <li><a href="#space-adapt"><span class=secno>1.3. </span>Adapting
      Layouts to Available Space</a>

     <li><a href="#source-independence"><span class=secno>1.4. </span> Source
      Independence</a>

     <li><a href="#accessibility"><span class=secno>1.5. </span> A note on
      the accessibility of content reordering</a>

     <li><a href="#intro-layering"><span class=secno>1.6. </span> Grid
      Layering of Elements</a>

     <li><a href="#placement"><span class=secno>1.7. </span> Module
      interactions</a>

     <li><a href="#values"><span class=secno>1.8. </span> Values</a>
    </ul>

   <li><a href="#terminology"><span class=secno>2. </span> Core Concepts of
    the Grid</a>

   <li><a href="#display"><span class=secno>3. </span> Declaring a grid
    template</a>
    <ul class=toc>
     <li><a href="#grid-lines-tracks"><span class=secno>3.1. </span> Grid
      Lines and Tracks</a>

     <li><a href="#grid-templates"><span class=secno>3.2. </span> Declaring a
      template: &lsquo;<code class=property>grid-template</code>&rsquo;</a>

     <li><a href="#grid-column-sizes"><span class=secno>3.3. </span>
      Specifying the widths of columns: &lsquo;<code
      class=property>grid-columns</code>&rsquo;</a>

     <li><a href="#grid-row-sizes"><span class=secno>3.4. </span> Specifying
      the height of rows: &lsquo;<code
      class=property>grid-rows</code>&rsquo;</a>

     <li><a href="#grid-shorthand"><span class=secno>3.5. </span> The
      &lsquo;<code class=property>grid</code>&rsquo; shorthand property</a>

     <li><a href="#default-slots"><span class=secno>3.6. </span>Default
      slots</a>
      <ul class=toc>
       <li><a href="#fraction-values-fr"><span class=secno>3.6.1. </span>
        Fraction Values: &lsquo;<code class=property>fr</code>&rsquo;</a>

       <li><a href="#computed-values-grid-rows-and-columns"><span
        class=secno>3.6.2. </span> &lsquo;<code
        class=css>getComputedStyle()</code>&rsquo; values for &lsquo;<code
        class=property>grid-rows</code>&rsquo; and &lsquo;<code
        class=property>grid-columns</code>&rsquo;</a>
      </ul>

     <li><a href="#slot-sizes"><span class=secno>3.7. </span> Calculating the
      size of the grid</a>
    </ul>

   <li><a href="#positioning"><span class=secno>4. </span> Positioning
    content into a grid element</a>
    <ul class=toc>
     <li><a href="#flow"><span class=secno>4.1. </span> Flowing content into
      slots: &lsquo;<code class=property>flow</code>&rsquo;</a>

     <li><a href="#absolute-positioning-using-a-grid-grid-c"><span
      class=secno>4.2. </span> Absolute positioning using a grid:
      &lsquo;<code class=property>grid-column</code>&rsquo; and &lsquo;<code
      class=property>grid-row</code>&rsquo;</a>

     <li><a href="#grid-position"><span class=secno>4.3. </span> The
      &lsquo;<code class=property>grid-position</code>&rsquo; shorthand
      property</a>

     <li><a href="#float"><span class=secno>4.4. </span> Floating elements
      inside templates</a>
    </ul>

   <li><a href="#slot-pseudo"><span class=secno>5. </span>Styling named
    slots: the &lsquo;<code class=css>::slot()</code>&rsquo;
    pseudo-element</a>

   <li><a href="#slot-layout"><span class=secno>6. </span> Layout within a
    slot</a>
    <ul class=toc>
     <li><a href="#alignment"><span class=secno>6.1. </span> Alignment</a>

     <li><a href="#sizing"><span class=secno>6.2. </span> Calculating the
      Size of Grid Items</a>

     <li><a href="#vertical-alignment"><span class=secno>6.3. </span>
      Vertical alignment</a>
    </ul>

   <li><a href="#conformance"><span class=secno>7. </span> Conformance</a>
    <ul class=toc>
     <li><a href="#conventions"><span class=secno>7.1. </span> Document
      conventions</a>

     <li><a href="#conformance-classes"><span class=secno>7.2. </span>
      Conformance classes</a>

     <li><a href="#partial"><span class=secno>7.3. </span> Partial
      implementations</a>

     <li><a href="#experimental"><span class=secno>7.4. </span> Experimental
      implementations</a>

     <li><a href="#testing"><span class=secno>7.5. </span> Non-experimental
      implementations</a>

     <li><a href="#cr-exit-criteria"><span class=secno>7.6. </span> CR exit
      criteria</a>
    </ul>

   <li class=no-num><a href="#acknowledgments"> Acknowledgments</a>

   <li class=no-num><a href="#references"> References</a>
    <ul class=toc>
     <li class=no-num><a href="#normative-references"> Normative
      references</a>

     <li class=no-num><a href="#other-references"> Other references</a>
    </ul>

   <li class=no-num><a href="#index"> Index</a>

   <li class=no-num><a href="#property-index"> Property index</a>
  </ul>
  <!--end-toc-->

  <h2 id=intro><span class=secno>1. </span> Introduction</h2>

  <p><em>This section is not normative.</em>

  <p class=issue>Merge introductory text, which right now is simply
   concatenated between Grid and Template.

  <div class=sidefigure>
   <p><img alt="Image: four elements move to four slots     in a template"
    longdesc=diagram.desc src=diagram.png>

   <p class=caption>Four slots, called a, b, c and d, each receive a part of
    a document
  </div>

  <p class=mtb>The styling of a Web page, a form or a graphical user
   interface can roughly be divided in two parts: (1) defining the overall
   “grid” of the page or window and (2) specifying the fonts, indents,
   colors, etc., of the text and other objects. The two are not completely
   separate, of course, because indenting or coloring a text influences the
   perceived grid as well. Nevertheless, when one separates the parts of a
   style that should change when the window gets bigger from the parts that
   stay the same, one often finds that the grid changes (room for a sidebar,
   extra navigation bar, big margins, larger images…), while fonts, colors,
   indents, numbering styles, and many other things don't have to change,
   until the size of the window becomes extreme.

  <p>The properties in this specification work by associating a <i>layout
   grid</i> with an element. Rather than letting an element lay out its
   descendants in their normal order as inline text or as blocks of text (the
   policies available in CSS level&nbsp;1), the policy defined in this module
   gives an element an invisible grid for aligning selected descendant
   elements.

  <p>Because layouts on the Web have to adapt to different window and paper
   sizes, the rows and columns of the grid can be made fixed or flexible in
   size.

  <p>The typical use cases for these properties include:

  <ul>
   <li>Complex Web pages, with multiple navigation bars in fixed positions,
    areas for advertisements, etc.

   <li>Complex forms, where the alignment of labels and form fields may be
    easier with the properties of this module than with the properties for
    tables and margins.

   <li>GUIs, where buttons, toolbars, labels, icons, etc., are aligned in
    complex ways and have to stay aligned (and not wrap, for example) when
    the window is resized.
  </ul>

  <p>Grid-based positioning is an alternative to absolute positioning, which,
   like absolute positioning, is especially useful for aligning elements that
   don't have simple relationships in the source (parent-child,
   ancestor-descendant, immediate sibling). But in contrast to absolute
   positioning, the elements are not positioned with the help of horizontal
   and vertical coordinates, but by mapping them into slots in a table-like
   template. The relative size and alignment of elements is thus governed
   implicitly by the rows and columns of the template.

  <p>The mapping is done with the &lsquo;<code
   class=property>position</code>&rsquo; property, which specifies in this
   case into which slot of the template the element goes. The template itself
   is specified on the &lsquo;<a href="#grid-template"><code
   class=property>grid-template</code></a>&rsquo; property of some ancestor
   of the elements to remap.

  <div class=example>
   <p>In this example, the four children of an element are assigned to four
    slots (called a, b, c and d) in a 2×2 template. (All mark-up examples in
    this specification are HTML fragments, unless otherwise stated.)

   <div class=sidefigure>
    <p><img alt="Image: sample rendering" longdesc=aapje.desc src=aapje.png>

    <p class=caption>Each element occupies one slot. In this template, all
     slots have the same size.
   </div>

   <pre>
<!-- -->&lt;style type="text/css"&gt;
<!-- -->  dl { grid: "ab"
<!-- -->             "cd" }
<!-- -->  #sym1 { position: slot(a) }
<!-- -->  #lab1 { position: slot(b) }
<!-- -->  #sym2 { position: slot(c) }
<!-- -->  #lab2 { position: slot(d) }
<!-- -->&lt;/style&gt;
<!-- -->&lt;dl&gt;
<!-- -->  &lt;dt id=sym1&gt;A
<!-- -->  &lt;dd id=lab1&gt;A is een aapje
<!-- -->  &lt;dt id=sym2&gt;B
<!-- -->  &lt;dd id=lab2&gt;B is de bakker
<!-- -->&lt;/dl&gt;
    </pre>
  </div>

  <div class=example>
   <p>Templates can also help with device-independence. This example uses
    Media Queries <a href="#MEDIAQ"
    rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> to change the overall
    layout of a page from 3-column layout for a wide screen to a 1-column
    layout for a narrow screen. It assumes the page has been marked-up with
    logical sections with IDs.

   <pre>
<!-- -->@media all
<!-- -->{
<!-- -->  body { grid: "aaa"
<!-- -->               "bcd" }
<!-- -->  #head { position: slot(a) }
<!-- -->  #nav  { position: slot(b) }
<!-- -->  #adv  { position: slot(c) }
<!-- -->  #body { position: slot(d) }
<!-- -->}
<!-- -->@media all and (max-width: 500px)
<!-- -->{
<!-- -->  body { grid: "a"
<!-- -->               "b"
<!-- -->               "c" }
<!-- -->  #head { position: slot(a) }
<!-- -->  #nav  { position: slot(b) }
<!-- -->  #adv  { display: none }
<!-- -->  #body { position: slot(c) }
<!-- -->}</pre>
  </div>

  <div class=example>
   <p>Elements can be positioned this way, but not made to overlap, unless
    with negative margins. Here is how the <a
    href="http://www.csszengarden.com/?cssfile=/026/026.css&amp;page=0">
    “zunflower” design</a> of the Zen Garden could be done:

   <pre>
<!-- -->#container { grid: "abc" }
<!-- -->#intro { position: (a); margin-right: -2em; box-shadow: 0.5em 0.5em 0.5em }
<!-- -->#supportingText { position: slot(b); box-shadow: 0.5em 0.5em 0.5em }
<!-- -->#linkList { position: slot(c) }</pre>
  </div>

  <div class=example>
   <p>Template-based positioning borrows some concepts from table layout, in
    particular the idea of aligning elements in rows and columns, so that
    they constrain each other's size. But there are also differences. This
    example shows some of them. Assume this document fragment:

   <pre>
<!-- -->&lt;div class=group>
<!-- --> &lt;div>aa aa aa aa aa aa&lt;/div>
<!-- --> &lt;div>bbb&lt;/div>
<!-- --> &lt;div class=menu>ccccc&lt;/div>
<!-- -->&lt;/div></pre>

   <p>We can lay it out as three columns, as the following illustrations
    show. The style sheet would contain the following.

   <pre>
<!-- -->.group {display: table}
<!-- -->.group > div {display: table-cell}
    </pre>

   <div class=figure>
    <p><img alt="[Three unequal cells]" longdesc=table1.desc src=table1.png>

    <p class=caption>Example of rendering with a table.
   </div>

   <p>We can also use a template, in which case the style sheet would contain
    this:

   <pre>
<!-- -->.group {grid: "abc"}
<!-- -->.group > div {position: slot(a)}
<!-- -->.group > div + div {position: slot(b)}
<!-- -->.group > div + div + div {position: slot(c)}
    </pre>

   <p>By default, the table is as wide as needed to fit its contents. To make
    sure it is as wide as its containing block, we need to add

   <pre>.group {display: table; width: 100%}</pre>

   <p>That is not needed for the template, but, on the other hand, if we want
    the template to fit its contents, we would need to say so:

   <pre>.group {grid: "abc"; width: fit-content}</pre>

   <p>(See <a href="#CSS3BOX"
    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> for the definition of
    the &lsquo;<code class=property>width</code>&rsquo; property.) The
    columns of the template are by default all the same size. The columns of
    the table satisfy certain constraints, but the exact size is not defined.
    We can make them all the same by adding a rule (see <a href="#CSS3TBL"
    rel=biblioentry>[CSS3TBL]<!--{{!CSS3TBL}}--></a>):

   <pre>.group {display: table; width: 100%; table-layout: fixed}</pre>

   <div class=figure>
    <p><img alt="[Three equal cells]" longdesc=table2.desc src=table2.png>

    <p class=caption>Example of rendering with equal columns.
   </div>

   <p>In both styles, we can set a column to a certain size:

   <pre>div.menu {width: 3em}</pre>

   <p>resp.,

   <pre>.group {grid: "abc" * * 3em}</pre>

   <div class=figure>
    <p><img alt="[Two equal cells, third is 3em wide]" longdesc=table3.desc
     src=table3.png>

    <p class=caption>Example of rendering with a fixed third column and the
     other two columns of equal width.
   </div>

   <p>If there is an unknown number of columns (children of the div.group
    element), the style sheet for the table model will automatically take
    them into account. The style sheet for the template model, however,
    creates a template of exactly three columns and can't handle tables with
    an unknown number of columns. The extra elements will be added into the
    default slot (in this case the &lsquo;<code class=css>a</code>&rsquo;
    slot).

   <p>In both models, elements can have borders, but only in the table model
    can borders be collapsed, which makes setting borders a little easier in
    the table model:

   <pre>
<!-- -->.group {display: table; border-collapse: collapse}
<!-- -->.group > div {border: solid}</pre>

   <p>resp.,

   <pre>
<!-- -->.group > div {border: solid; border-left: none}
<!-- -->.group > div:first-child {border-left: solid}
    </pre>

   <p>In the template model, the order of the elements is explicit, and thus
    it is possible to reverse the order of the columns:

   <pre>
<!-- -->.group > div {position: slot(c)}
<!-- -->.group > div + div {position: slot(b)}
<!-- -->.group > div + div + div {position: slot(a)}
    </pre>

   <div class=figure>
    <p><img alt="[Different contents for the cells]" longdesc=table4.desc
     src=table4.png>

    <p class=caption>Example of rendering with the contents of the three
     columns reversed: the third element is shown in the first slot and the
     first element in the third slot.
   </div>

   <p>In the table model, the order of the rows and columns is given by the
    document source and thus can't be changed.
  </div>

  <div class=example>
   <p>This example shows a way to move notes to the end of a section.
    “Notes” in this example refers to elements in HTML with a class of
    “note”. A fragment of HTML such as

   <pre>
<!-- -->&lt;div class=section>
<!-- -->  &lt;p>The balubious coster of the fifth secter&lt;span
<!-- -->    class=note> The sixth secter coster is a difter
<!-- -->    manon.&lt;/span> of The Rollow Carpug mentizes a costernica.
<!-- -->  &lt;p>&hellip;
<!-- -->&lt;/div></pre>

   <p>with this style sheet

   <pre>
<!-- -->div.section {
<!-- -->    grid: "*" available
<!-- -->          "F" available}
<!-- -->.note {
<!-- -->    position: slot(F);
<!-- -->    content: counter(note) ".\A0" contents;
<!-- -->    counter-increment: note;
<!-- -->    font-size: smaller}
<!-- -->.note::before {
<!-- -->    content: counter(note);
<!-- -->    position: slot(*);
<!-- -->    vertical-align: super;
<!-- -->    font-size: larger}</pre>

   <p>results in a rendering similar to this:

   <div class=figure>
    <p><img
     alt="Same text, with the SPAN replaced by       “(1)” and its content moved to the end."
     longdesc=footnotes.desc src=footnotes.png>

    <p class=caption>Rendering of a text with footnotes.
   </div>
  </div>

  <h3 id=grid-intro><span class=secno>1.1. </span> Introduction to Grids</h3>

  <h3 id=background><span class=secno>1.2. </span> Background</h3>

  <div class=sidefigure> <img alt=FIXME class=figure
   src="images/basic-form.png">
   <p class=caption>Application layout example requiring horizontal and
    vertical alignment.</p>
  </div>

  <p>As websites evolved from simple documents into complex, interactive
   applications, tools for document layout, e.g. floats, were not necessarily
   well suited for application layout. By using a combination of tables,
   JavaScript, or careful measurements on floated elements, authors
   discovered workarounds to achieve desired layouts. Layouts that adapted to
   the available space were often brittle and resulted in counter-intuitive
   behavior as space became constrained. As an alternative, authors of many
   web applications opted for a fixed layout that cannot take advantage of
   changes in the available rendering space on a screen.

  <p>The layout capabilities of the Grid address these problems. The Grid
   provides a mechanism for authors to divide available space for layout into
   columns and rows using a set of predictable sizing behaviors. Authors can
   then precisely position and size the building block elements of their
   application by referencing the <a href="#grid-line">Grid Line</a>s between
   the columns and rows, or by defining and referencing a <a
   href="#grid-cell">Grid Slot</a>, which is a rectangular space covering an
   intersection of columns and rows. Figure 1 illustrates a basic layout
   which can be achieved with the Grid.

  <h3 id=space-adapt><span class=secno>1.3. </span>Adapting Layouts to
   Available Space</h3>

  <div class=sidefigure>
   <p><img alt=FIXME src="images/game-smaller.png">

   <p class=caption>Five grid items arranged according to content size and
    available space.</p>
  </div>

  <div class=sidefigure>
   <p><img alt=FIXME src="images/game-larger.png">

   <p class=caption>Growth in the grid due to an increase in available space.</p>
  </div>

  <p>The <a href="#grid-element1"><i>grid element</i></a> can be used to
   intelligently reflow elements within a webpage. Figure 2 represents a game
   with five major areas in the layout: the game title, stats area, game
   board, score area, and control area. The author's intent is to divide the
   space for the game such that:

  <ul>
   <li>The stats area always appears immediately under the game title.

   <li>The game board appears to the right of the stats and title.

   <li>The top of the game title and the game board should always align.

   <li>The bottom of the game board and the stats area align when the game
    has reached its minimum height, but otherwise the game board will stretch
    to take advantage of all the screen real-estate available to it.

   <li>The score area should align into the column created by the game and
    stats area, while the controls are centered under the board.
  </ul>

  <p>As an alternative to using script to control the absolute position,
   width, and height of all elements, the author can use the <a
   href="#grid-element1"><i>grid element</i></a>, as shown in Figure 3. The
   following example shows how an author might achieve all the sizing,
   placement, and alignment rules declaratively.

  <p>Note that there are multiple ways to specify the structure of the <a
   href="#grid-element">Grid</a> and to position and size <i>grid items</i>,
   each optimized for different scenarios. This example illustrates one that
   an author may use to define the position and space for each <i>grid
   item</i> using the &lsquo;<a href="#grid-rows"><code
   class=property>grid-rows</code></a>&rsquo; and &lsquo;<a
   href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;
   properties of the <a href="#grid-element1"><i>grid element</i></a>, and
   the &lsquo;<a href="#grid-row"><code
   class=property>grid-row</code></a>&rsquo; and &lsquo;<a
   href="#grid-column"><code class=property>grid-column</code></a>&rsquo;
   properties on each <i>grid item</i>.

  <pre class=example>&lt;style type="text/css"&gt;
    #grid { 
        display: grid;

        /* Two columns: the first sized to content, the second receives the remaining space,   */
        /* but is never smaller than the minimum size of the board or the game controls, which */
        /* occupy this column. */
        grid-columns: auto minmax(min-content, 1fr);

        /* Three rows: the first and last sized to content, the middle row receives the remaining */
        /* space, but is never smaller than the minimum height of the board or stats areas.       */
        grid-rows: auto minmax(min-content, 1fr) auto
    }

    /* Each part of the game is positioned between grid lines by referencing the starting grid line and */
    /* then specifying, if more than one, the number of rows or columns spanned to determine the ending */
    /* grid line, which establishes bounds for the part. */
    #title    { grid-column: 1; grid-row: 1 }
    #score    { grid-column: 1; grid-row: 3 }
    #stats    { grid-column: 1; grid-row: 2; grid-row-align: start }
    #board    { grid-column: 2; grid-row: 1; grid-row-span: 2 }
    #controls { grid-column: 2; grid-row: 3; grid-column-align: center }
&lt;/style&gt;

&lt;div id="grid"&gt;
    &lt;div id="title"&gt;Game Title&lt;/div&gt;
    &lt;div id="score"&gt;Score&lt;/div&gt;
    &lt;div id="stats"&gt;Stats&lt;/div&gt;
    &lt;div id="board"&gt;Board&lt;/div&gt;
    &lt;div id="controls"&gt;Controls&lt;/div&gt;
&lt;/div&gt;</pre>

  <h3 id=source-independence><span class=secno>1.4. </span> Source
   Independence</h3>

  <div class=sidefigure>
   <p><img alt=FIXME src="images/game-portrait.png">

   <p class=caption>An arrangement suitable for "portrait" orientation.</p>
  </div>

  <div class=sidefigure>
   <p><img alt=FIXME src="images/game-landscape.png">

   <p class=caption>An arrangement suitable for "landscape" orientation.</p>
  </div>

  <p>Continuing the prior example, the author also wants the game to adapt to
   the space available on traditional computer monitors, handheld devices, or
   tablet computers. Also, the game should optimize the placement of the
   components when viewed either in landscape or portrait orientation
   (Figures 4 and 5). By combining the CSS markup for the <a
   href="#grid-element1"><i>grid element</i></a> with <a
   href="http://www.w3.org/TR/css3-mediaqueries/">media queries</a> <a
   href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>, the author
   is able to use the same semantic markup, but rearranged independent of its
   source order, to achieve the desired layout in both orientations.

  <p>The following example leverages the <a
   href="#grid-element">Grid</a>&lsquo;<code class=css>s ability to name the
   space which will be occupied by a <i>grid item</i>. This allows the author
   to avoid rewriting rules for <i>grid items</i> as the <a
   href="#grid-element">Grid</a></code>&rsquo;s definition changes.

  <pre class=example>&lt;style type="text/css"&gt;
    @media (orientation: portrait) {
        #grid { 
            display: grid;
            
            /* The rows, columns and cells of the grid are defined visually using the grid-template property.        */
            /* Each string is a row, and each letter a cell.  The max number of letters in any one string determines */
            /* the number of columns. */
            grid-template: "ta"
                           "sa"
                           "bb"
                           "cc";
            
            /* Columns and rows created with the template property can be assigned a sizing function with the */
            /* grid-columns and grid-rows properties. */
            grid-columns: auto minmax(min-content, 1fr); 
            grid-rows: auto auto minmax(min-content, 1fr) auto
        }
    }

    @media (orientation: landscape) {
        #grid { 
            display: grid;
            
            /* Again the template property defines cells of the same name, but this time positioned differently */
            /* to better suit a landscape orientation. */
            grid-template: "tb"
                           "ab"
                           "sc";
            
            grid-columns: auto minmax(min-content, 1fr); 
            grid-rows: auto minmax(min-content, 1fr) auto
        }
    }

    /* The grid-cell property places a grid item into named region (cell) of the grid. */
    #title    { grid-cell: "t" }
    #score    { grid-cell: "s" }
    #stats    { grid-cell: "a" }
    #board    { grid-cell: "b" }
    #controls { grid-cell: "c" }
&lt;/style&gt;

&lt;div id="grid"&gt;
    &lt;div id="title"&gt;Game Title&lt;/div&gt;
    &lt;div id="score"&gt;Score&lt;/div&gt;
    &lt;div id="stats"&gt;Stats&lt;/div&gt;
    &lt;div id="board"&gt;Board&lt;/div&gt;
    &lt;div id="controls"&gt;Controls&lt;/div&gt;
&lt;/div&gt;</pre>

  <h3 id=accessibility><span class=secno>1.5. </span> A note on the
   accessibility of content reordering</h3>

  <p><em>(This section is not normative.)</em>

  <p>The facilities in this specification allow elements from a document to
   be displayed in a visual order that is to a large extent independent of
   the order in the document. That may have both positive and negative
   effects on accessibility. The positive aspect is that it allows the
   content in the document to be kept in logical order, so that the document
   is as functional as possible without the style sheet and on media where
   the style sheet doesn't apply. A negative aspect is that a document that
   has a defined tab order (the order in which elements get the focus when
   the tab-key is pressed) will show on the screen with a tab order unrelated
   to the visual order. It may be necessary to use the keyboard control
   features of the CSS Basic User Interface module <a href="#CSS3UI"
   rel=biblioentry>[CSS3UI]<!--{{CSS3UI}}--></a> to ensure that the tab
   navigation follows the visual order, or to refrain from positioning
   semantically related elements in different parts of a template.

  <p>The following two requirements from the Web Content Accessibility
   Guidelines (WCAG) 2.0 <a href="#WCAG20"
   rel=biblioentry>[WCAG20]<!--{{WCAG20}}--></a> are particularly relevant.
   See that specification for more information.

  <blockquote>
   <p><a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-sequence"><strong>1.3.2
    Meaningful Sequence:</strong></a> When the sequence in which content is
    presented affects its meaning, a <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#correct-reading-sequencedef">correct
    reading sequence</a> can be <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#programmaticallydetermineddef     ">programmatically
    determined.</a> (Level A)
  </blockquote>

  <blockquote>
   <p><a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-order"><strong>2.4.3
    Focus Order:</strong></a> If a <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef">Web
    page</a> can be <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#nav-seqdef">navigated
    sequentially</a> and the navigation sequences affect meaning or
    operation, focusable components receive focus in an order that preserves
    meaning and operability. (Level A)
  </blockquote>

  <h3 id=intro-layering><span class=secno>1.6. </span> Grid Layering of
   Elements</h3>

  <div class=sidefigure>
   <p><img alt=FIXME src="images/control-layering-and-alignment.png">

   <p class=caption>A control composed of layered HTML elements.</p>
  </div>

  <p>In the example shown in Figure 6, the author is creating a custom slider
   control. The control has six parts. The lower and upper labels align to
   the left and right edges of the control. The track of the slider spans the
   area between the labels. The lower and upper fill parts touch beneath the
   thumb, and the thumb is a fixed width and height that can be moved along
   the track by updating the two fraction-sized columns.

  <p>Prior to the <a href="#grid-element1"><i>grid element</i></a>, the
   author would have likely used absolute positioning to control the top and
   left coordinates, along with the width and height of each HTML element
   that comprises the control. By leveraging the <a
   href="#grid-element1"><i>grid element</i></a>, the author can instead
   limit script usage to handling mouse events on the thumb, which snaps to
   various positions along the track as the &lsquo;<a
   href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;
   property of the <a href="#grid-element1"><i>grid element</i></a> is
   updated.

  <pre class=example>&lt;style type="text/css"&gt;
    #grid { 
        display: grid;

        /* The grid-columns and rows properties also support naming grid lines which can then be used */
        /* to position grid items.  The line names are assigned on either side of a column or row     */
        /* sizing function where the line would logically exist. */
        grid-columns:      
            "start"        auto 
            "track-start"  0.5fr 
            "thumb-start"  auto 
            "fill-split"   auto 
            "thumb-end"    0.5fr 
            "track-end"    auto
            "end";
    }

    /* Grid-column and grid-row accept a starting and optional ending line.  Below the lines are referred to by name. */
    /* Beyond any semantic advantage, the names also allow the author to avoid renumbering the grid-row and column     */
    /* properties of the grid items.  This is similar to the concept demonstrated in the prior example with the        */
    /* grid-template property during orientation changes, but grid lines can also work with layered grid items that    */
    /* have overlapping cells of different shapes like the thumb and track parts in this example. */
    #lower-label { grid-column: "start" }
    #track       { grid-column: "track-start" "track-end"; grid-row-align: center }
    #upper-label { grid-column: "track-end"; }
    
    /* Fill parts are drawn above the track so set z-index to 5. */
    #lower-fill  { grid-column: "track-start" "fill-split"; grid-row-align: center; z-index: 5 }
    #upper-fill  { grid-column: "fill-split" "track-end"; grid-row-align: center; z-index: 5 }
    
    /* Thumb is the topmost part; assign it the highest z-index value. */
    #thumb       { grid-column: "thumb-start" "thumb-end"; z-index: 10 }
&lt;/style&gt;

&lt;div id="grid"&gt;
    &lt;div id="lower-label"&gt;Lower Label&lt;/div&gt;
    &lt;div id="upper-label"&gt;Upper Label&lt;/div&gt;
    &lt;div id="track"&gt;Track&lt;/div&gt;
    &lt;div id="lower-fill"&gt;Lower Fill&lt;/div&gt;
    &lt;div id="upper-fill"&gt;Upper Fill&lt;/div&gt;
    &lt;div id="thumb"&gt;Thumb&lt;/div&gt;
&lt;/div&gt;</pre>

  <h3 id=placement><span class=secno>1.7. </span> Module interactions</h3>

  <p class=replaceme>Explain, normatively, how this module affects the
   definition of CSS.

  <p>This module replaces and extends the <var class=replaceme>SUMMARIZE
   HERE</var> features defined in <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections <var
   class=replaceme>W.X and Y.Z</var>.

  <p>See <a href="#CSS3PAGE"
   rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a> for the definition of
   <a href="http://www.w3.org/TR/css3-multicol/#multi-column-element"><dfn
   id=multi-column-element.>multi-column element.</dfn></a>

  <p><a href="#CSS3-WRITING-MODES"
   rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
   defines the <dfn id=writing-mode>writing-mode</dfn> property, which
   defines when elements have a <dfn id=vertical-writing-mode>vertical
   writing mode</dfn> (text lines are vertical) or a <dfn
   id=horizontal-writing-mode>horizontal writing mode</dfn> (text lines are
   horizontal). For brevity, we refer to the former as a <dfn
   id=vertical-element title="vertical|vertical element">vertical
   element</dfn> and to the latter as a <dfn id=horizontal-element.
   title="horizontal|horizontal element">horizontal element.</dfn>

  <p><a href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>
   defines the intrinsic sizes of boxes.

  <p>Following <a href="#CSS3-WRITING-MODES"
   rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a> and
   <a href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>, we
   define the <dfn id=inline-dimension>inline dimension</dfn> of a box,
   element or slot as meaning either its width or height, depending on
   whether it is <a href="#horizontal-element."><em>horizontal</em></a> or <a
   href="#vertical-element"><em>vertical,</em></a> respectively. And
   likewise: the <dfn id=block-dimension>block dimension</dfn> of a box,
   element or slot <em>at a given inline dimension</em> is its size in the
   perpendicular dimension.

  <p>&lsquo;<code class=property>Direction</code>&rsquo; is defined in <a
   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.

  <h3 id=values><span class=secno>1.8. </span> Values</h3>

  <p>This specification follows the <a
   href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   definition conventions</a> from <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
   this specification are defined in CSS Level 2 Revision 1 <a
   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
   modules may expand the definitions of these value types: for example <a
   href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
   when combined with this module, expands the definition of the
   &lt;color&gt; value type as used in this specification.

  <p>In addition to the property-specific values listed in their definitions,
   all properties defined in this specification also accept the <a
   href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
   keyword as their property value. For readability it has not been repeated
   explicitly.

  <h2 id=terminology><span class=secno>2. </span> Core Concepts of the Grid</h2>

  <div class=sidefigure> <img alt=FIXME class=figure
   src="images/grid-concepts.png">
   <p class=caption>A diagram illustrating the relationship between the <a
    href="#grid-element1"><i>grid element</i></a> and its Tracks, Lines,
    Cells and Items.</p>
  </div>

  <p>A <dfn id=grid-element>grid element</dfn> is declared in markup by
   setting the display property of an element to &lsquo;<a href="#grid"><code
   class=css>grid</code></a>&rsquo; or &lsquo;<code
   class=css>inline-grid</code>&rsquo;. <!--
  Child elements of the Grid are termed <a href="#grid-item">grid items</a>
  and may be positioned and sized by the <i>grid element</i>
  by leveraging the following logical concepts:

  <ul>
      <li><a href="#grid-track">Grid Track</a>s</li>
      <li><a href="#grid-line">Grid Line</a>s</li>
      <li><a href="#slot">Slot</a>s</li>
  </ul>
  -->
   

  <p> Figure 7 illustrates the relationship between these concepts and the
   markup in the subsections that follow produce the result shown in the
   figure.

  <p><dfn id=grid-track>Grid track</dfn> is the generic name in this
   specification for a row or column in a grid. Grid tracks are defined with
   the properties &lsquo;<a href="#grid-rows"><code
   class=property>grid-rows</code></a>&rsquo; (to define rows) and &lsquo;<a
   href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;
   (to define columns) on the <a href="#grid-element1"><i>grid
   element</i></a>. Each track is defined by declaring a list of sizes, one
   size for each track. <!-- Tracks
  define the space between <a href="#grid-line">Grid Line</a>s. -->
   

  <pre class=example>&lt;style type="text/css"&gt;
#grid { 
    grid-columns: 150px 1fr; /* two columns */
    grid-rows: 50px 1fr 50px /* three rows  */
}
&lt;/style&gt;</pre>

  <p><dfn id=grid-line>Grid line</dfn> is the term in this specification for
   the vertical edges of columns and the horizontal edges of rows. If there
   are <var>N</var> columns, their edges are numbered from 1 (the leftmost
   edge of the first column) to <var>N</var>+1 (the rightmost edge of the
   last column. Analogously for the edges of the rows. <!--
  <p>The following two examples create three column <i>Grid Lines</i>
  and four row <i>Grid Lines</i>.  The first example demonstrates how
  an author would refer to the <a href="#grid-line">Grid Line</a>s
  using <a href="#grid-line">Grid Line</a> numbers.  The second example
  uses explicitly named <a href="#grid-line">Grid Line</a>s.

  <pre class="example">&lt;style type="text/css"&gt;
  #grid { 
      display: grid; 
      grid-columns: 150px 1fr;
      grid-rows: 50px 1fr 50px
  }

  #item1 { grid-column: 2; grid-row: 1 4 }
&lt;/style&gt;</pre>

  <pre class="example">&lt;style type="text/css"&gt;
  /* equivalent layout to the prior example, but using named lines */
  #grid { 
      display: grid; 
      grid-columns: 150px "item1-start" 1fr "item1-end";
      grid-rows: "item1-start" 50px 1fr 50px "item1-end"
  }

  #item1 { 
      grid-column: "item1-start" "item1-end"; 
      grid-row: "item1-start" "item1-end" 
  }
&lt;/style&gt;</pre>
  -->
   

  <p>A <dfn id=grid-cell>grid cell</dfn> is the intersection of a row and a
   column. A grid with <var>N</var> columns and <var>M</var> rows has
   <var>N</var>*<var>M</var> cells.
   <!-- The term “slot” is defined under 'grid-template' --> <!--
  are the logical space used to lay out
  one or more <i>grid items</i>.
  <i>slots</i> can be defined explicitly using the 'grid-template'
  property, or anonymously by referencing a region of the Grid using the
  'grid-row' and 'grid-column' properties on a <i>grid item</i>.

  <p>Whether a <i>slot</i> is created explicitly or implicitly, there
  is no difference in the layout or drawing order of the
  <i>grid items</i> which are associated with that
  <i>slot</i>.
  <pre class="example">&lt;style type="text/css"&gt;
/* using the template syntax */
#grid  { 
    display: grid; 
    grid-template: "ad"
                   "bd"
                   "cd";
    grid-columns: 150px 1fr;
    grid-rows: 50px 1fr 50px
}

#item2 { position: slot(b) }
#item3 { position: slot(b) }

/* Align items 2 and 3 at different points in the slot "b".  */
/* By default, Grid Items are stretched to fit their slot    */
/* and these items would layer one over the other. */
#item2 { grid-row-align: start }
#item3 { grid-column-align: end; grid-row-align: end }&lt;/style&gt;</pre>
  -->
   

  <h2 id=display><span class=secno>3. </span> Declaring a grid template</h2>

  <p>An element is a <dfn id=grid-element0>grid element</dfn> (i.e., it
   defines a grid for its descendants) if its &lsquo;<a
   href="#display0"><code class=property>display</code></a>&rsquo; value is
   &lsquo;<a href="#grid"><code class=css>grid</code></a>&rsquo; or
   &lsquo;<code class=css>inline-grid</code>&rsquo;.

  <p>The <dfn id=grid-ancestor>grid ancestor</dfn> of an element is the
   nearest ancestor that is a grid element.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=display0>display</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>&hellip; | grid | inline-grid
  </table>

  <p>This module adds the &lsquo;<a href="#grid"><code
   class=css>grid</code></a>&rsquo; and &lsquo;<code
   class=css>inline-grid</code>&rsquo; values to the &lsquo;<a
   href="#display0"><code class=property>display</code></a>&rsquo; property
   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>, as defined
   below:

  <dl>
   <dt><dfn id=value-def-display--grid>&lsquo;<code
    class=css>grid</code>&rsquo;</dfn>

   <dd>A value of grid causes an element to display as a block-level <a
    href="#grid-element1"><i>grid element</i></a>.

   <dt><dfn id=value-def-display-inline-grid>&lsquo;<code
    class=css>inline-grid</code>&rsquo;</dfn>

   <dd>A value of inline-grid causes an element to display as an inline-level
    <a href="#grid-element1"><i>grid element</i></a>.
  </dl>

  <div class=issue>
   <p>Should grid elements be created automatically without using &lsquo;<a
    href="#display0"><code class=property>display</code></a>&rsquo;? On the
    one hand, this (a) is not consistent with how flex boxes are created and
    (b) could create some confusing dynamics (e.g., setting &lsquo;<code
    class=css>display: table</code>&rsquo; or &lsquo;<code class=css>display:
    flexbox</code>&rsquo; removes any grid, but setting &lsquo;<code
    class=css>display: table-cell</code>&rsquo; or &lsquo;<code
    class=css>display: list-item</code>&rsquo; keeps the grid); but (1)
    requires only one instead of two properties to create a grid element, (2)
    allows other block container elements (such as table cells, table
    captions, list items, flex items&hellip;) to contain a grid, without
    extra keywords for &lsquo;<a href="#display0"><code
    class=property>display</code></a>&rsquo; (&lsquo;<code
    class=property>table-cell-grid</code>&rsquo;, &lsquo;<code
    class=property>list-item-grid</code>&rsquo;&hellip;), and (3) is
    consistent with how <a
    href="http://www.w3.org/TR/css3-multicol/#multi-column-element">multicolumn
    elements</a> are created.

   <p>Proposed text:

   <p>An element is a <dfn id=grid-element1>grid element</dfn> (i.e., it
    defines a grid for its descendants) if it generates a <a
    href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block
    container box</a> <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and one or more of the
    following is true:

   <ul>
    <li>The element's &lsquo;<a href="#grid-template"><code
     class=property>grid-template</code></a>&rsquo; is not &lsquo;<code
     class=css>none</code>&rsquo;.

    <li>The element's &lsquo;<a href="#grid-rows"><code
     class=property>grid-rows</code></a>&rsquo; is not &lsquo;<code
     class=css>auto</code>&rsquo;.

    <li>The element's &lsquo;<a href="#grid-columns"><code
     class=property>grid-columns</code></a>&rsquo; is not &lsquo;<code
     class=css>auto</code>&rsquo;.
   </ul>

   <p>These properties are defined below.
  </div>

  <p class=note>Block containers are, informally, elements that can have
   block elements as children, such as blocks, inline blocks or table cells,
   but not inline elements or replaced elements.

  <p>The <dfn id=number-of-columns>number of columns</dfn> of a <a
   href="#grid-element1">grid element</a> is defined as follows:

  <ol>
   <li>If &lsquo;<a href="#grid-template"><code
    class=property>grid-template</code></a>&rsquo; is not &lsquo;<code
    class=property>none</code>&rsquo;, it determines the number of columns.

   <li>Otherwise, if &lsquo;<a href="#grid-columns"><code
    class=property>grid-columns</code></a>&rsquo; is not &lsquo;<code
    class=property>auto</code>&rsquo;, the number of columns is equal to the
    number of <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a>
    values in &lsquo;<a href="#grid-columns"><code
    class=property>grid-columns</code></a>&rsquo;.

   <li>Otherwise, the grid has one column.
  </ol>

  <p>The <dfn id=number-of-rows>number of rows</dfn> of a <a
   href="#grid-element1">grid element</a> is defined as follows:

  <ol>
   <li>If &lsquo;<a href="#grid-template"><code
    class=property>grid-template</code></a>&rsquo; is not &lsquo;<code
    class=property>none</code>&rsquo;, it determines the number of rows.

   <li>Otherwise, if &lsquo;<a href="#grid-rows"><code
    class=property>grid-rows</code></a>&rsquo; is not &lsquo;<code
    class=property>auto</code>&rsquo;, the number of rows is equal to the
    number of <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a>
    values in &lsquo;<a href="#grid-rows"><code
    class=property>grid-rows</code></a>&rsquo;.

   <li>Otherwise, the grid has one row.
  </ol>

  <div class=issue>
   <p>Alternative definition:

   <p>The number of columns is the number of <a
    href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> values in
    &lsquo;<a href="#grid-columns"><code
    class=property>grid-columns</code></a>&rsquo; or the number of columns in
    &lsquo;<a href="#grid-template"><code
    class=property>grid-template</code></a>&rsquo;, whichever is larger. (A
    value of &lsquo;<code class=css>none</code>&rsquo; in this case means
    zero columns.)

   <p>The number of rows is the number of <a
    href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> values in
    &lsquo;<a href="#grid-rows"><code
    class=property>grid-rows</code></a>&rsquo; or the number of rows in
    &lsquo;<a href="#grid-template"><code
    class=property>grid-template</code></a>&rsquo;, whichever is larger. (A
    value of &lsquo;<code class=css>none</code>&rsquo; in this case means
    zero rows.)
  </div>

  <p class=issue>What if an element has both &lsquo;<code
   class=property>columns</code>&rsquo; and &lsquo;<a
   href="#grid-template"><code
   class=property>grid-template</code></a>&rsquo;, is it a grid element or a
   column element? (or do the columns apply to the default slot?)

  <p class=issue>Use &lsquo;<code class=property>fr</code>&rsquo; unit (as in
   css3-grid-align) instead of &lsquo;<code class=css>*</code>&rsquo; (as in
   css3-layout).

  <h3 id=grid-lines-tracks><span class=secno>3.1. </span> Grid Lines and
   Tracks</h3>

  <div class=sidefigure> <img alt="Image: Grid Lines." class=figure
   src="images/grid-lines.png">
   <p class=caption>Grid Lines.</p>
  </div>

  <p><a href="#grid-element1"><i>grid element</i></a>s use <a
   href="#grid-line">Grid Line</a>s to divide their space. There are two sets
   of <a href="#grid-line">Grid Line</a>s: one set defined by the columns
   parallel to the <a
   href="http://www.w3.org/TR/css3-writing-modes/#block-flow-dimensions">block
   flow dimension</a>, and another orthogonal set defined by rows in the <a
   href="http://www.w3.org/TR/css3-writing-modes/#inline-dimension">inline
   dimension</a>.

  <p>A <a href="#grid-track">Grid Track</a> is a generic term for the column
   or row between two <a href="#grid-line">Grid Line</a>s. Each <a
   href="#grid-track">Grid Track</a> is assigned a sizing function, which
   controls how wide or tall the column or row may grow, and thus how far
   apart two <a href="#grid-line">Grid Line</a>s are. The sizing function
   specified can be a length, a percentage of the <a
   href="#grid-element1"><i>grid element</i></a>&lsquo;<code class=css>s
   size, derived from the contents occupying the column or row, or a
   proportion of the space which remains in the <a
   href="#grid-element1"><i>grid element</i></a>. In the last case, remaining
   space refers to the width or height of the <a
   href="#grid-element1"><i>grid element</i></a> after accounting for space
   already consumed by columns and rows sized with a length, percentage or
   content. The size can also be specified as a range using a minmax
   function, which can combine any of the previously mentioned mechanisms to
   define a min and max size for the column or row. </code>

  <div class=example>
   <p>In the following example there are two columns and three rows.  The
    first column is 150px wide beginning from the starting edge of the <a
    href="#grid-element1"><i>grid element</i></a>&rsquo;s content box.  The
    second column uses fractional sizing, which is a function of the
    remaining space in the Grid.  Its size will vary as the width of the <a
    href="#grid-element1"><i>grid element</i></a> changes.  If the used
    width of the <a href="#grid-element1"><i>grid element</i></a> is 200px,
    then the second column 50px wide.  If the used width of the <a
    href="#grid-element1"><i>grid element</i></a> is 100px, then the second
    column is 0px and any content positioned in the column will be
    overflowing the <a href="#grid-element1"><i>grid element</i></a>. 
    Sizing occurs in a similar fashion for the rows.

   <pre>&lt;style type="text/css"&gt;
<!-- -->  #grid { 
<!-- -->    display: grid; 
<!-- -->    grid-columns: 150px 1fr;
<!-- -->    grid-rows: 50px 1fr 50px
<!-- -->  }
<!-- -->&lt;/style&gt;</pre>
  </div>

  <h3 id=grid-templates><span class=secno>3.2. </span> Declaring a template:
   &lsquo;<a href="#grid-template"><code
   class=property>grid-template</code></a>&rsquo;</h3>

  <p>The &lsquo;<a href="#grid-template"><code
   class=property>grid-template</code></a>&rsquo; property implicitly assigns
   a grid to an element and defines named slots in the grid. It can also
   designate a slot as the <a href="#default-slot."><em>default
   slot,</em></a> for unpositioned content.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-template>grid-template</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>none | <var>&lt;string&gt;</var>+

    <tr>
     <th>Initial:

     <td>none

    <tr>
     <th>Applies to:

     <td><a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block
      container elements</a> <a href="#CSS21"
      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed&nbsp;value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>Each string consist of one or more asterisks (“*”), letters, periods
   (“.”), spaces and tabs. Each string represents one row in the
   template, each symbol other than a space or tab represents one column in
   that row. Spaces and tabs have no meaning. They may be added for
   readability.

  <p>The symbols in the template have the following meaning

  <dl>
   <dt>&lt;letter&gt;

   <dd>Named slot for content

   <dt>&lsquo;<code class=css>*</code>&rsquo; (asterisk)

   <dd>Default slot for content (explained below).

   <dt>. (period)

   <dd>Blank space.
  </dl>

  <p>Multiple identical letters in adjacent rows or columns form a single
   <dfn id=slot>slot</dfn> that spans those rows and columns. Ditto for
   multiple “*”s. Slot names are case-sensitive, so uppercase and
   lowercase letters are considered to be different letters.

  <p>Non-rectangular slots and multiple slots with the same letter are
   illegal. A template without any letter or “*” is illegal. A template
   with more than one “*” slot is illegal. These errors cause the
   declaration to be ignored.

  <p class=note>Note: non-rectangular and disconnected regions may be
   permitted in a future update of CSS.

  <p>Rows with fewer columns than other rows are implicitly padded with
   periods (“.”).

  <p>Each slot (letter or “*”) acts as a block element for its contents.

  <p>If the value is &lsquo;<code class=css>none</code>&rsquo;, then no
   explicit slots are defined. If the element is a <a
   href="#grid-element1"><em>grid element,</em></a> then the element instead
   has an <dfn id=implicit-template>implicit template</dfn> consisting of a
   single, anonymous slot. I.e., for a grid element with <var>N</var> columns
   and <var>M</var> rows, the implicit template is equivalent to <var>M</var>
   strings of <var>N</var> asterisks:

  <blockquote>
   <p><code>"***</code>&hellip;<code>***"</code><br>
    <code>"***</code>&hellip;<code>***"</code><br>
    &#8942;<br>
    <code>"***</code>&hellip;<code>***"</code>
  </blockquote>

  <p class=note>Note that an element is a grid element in this case if
   &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo; and &lsquo;<a
   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; are not
   both &lsquo;<code class=css>auto</code>&rsquo;.

  <p class=issue>Are grid templates logically oriented (relative to writing
   mode), or absolutely-oriented?

  <h3 id=grid-column-sizes><span class=secno>3.3. </span> Specifying the
   widths of columns: &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo;</h3>

  <p>The &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo; property specifies the sizes
   of the columns of a grid.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-columns>grid-columns</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>auto | <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a>+

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td><a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block
      container elements</a> <a href="#CSS21"
      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>yes, between grids with the same number of tracks

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed&nbsp;value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>Where

  <pre class=prod>
<!-- --><dfn
   id=lttrack-sizegt>&lt;track-size&gt;</dfn> = <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | * | <var>&lt;fraction&gt;</var> |
<!-- -->  <a
   href="#ltminmaxgt"><var>&lt;minmax&gt;</var></a> | min-content | max-content | fit-content
<!-- --><dfn
   id=ltminmaxgt>&lt;minmax&gt;</dfn> = minmax( <a
   href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> , <a
   href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> )
  </pre>

  <p>Each <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> sets
   the width of a column.

  <p>If an element has <a href="#number-of-columns"
   title="number of columns"><var>N</var> columns,</a> only the first
   <var>N</var> <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a>
   values are used, the others are ignored. If there are fewer than
   <var>N</var> values, or if the value is &lsquo;<code
   class=property>auto</code>&rsquo;, the missing ones are all &lsquo;<code
   class=css>*</code>&rsquo; <span class=issue>[or &lsquo;<code
   class=css>1fr</code>&rsquo;]</span>.

  <p>Each <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> can be
   one of the following:

  <dl>
   <dt><var>&lt;length&gt;</var>

   <dd> An explicit width for that column. Negative values are illegal.

   <dt><var>&lt;fraction&gt;</var>

   <dd> (A non-negative number followed by &lsquo;<code
    class=property>fr</code>&rsquo;.) A fraction of the remaining space, see
    <a href="#fraction-values-fr">Fraction values</a> below.

   <dt>&lsquo;<code class=css>*</code>&rsquo; (asterisk)

   <dd> All columns with a width of &lsquo;<code class=css>*</code>&rsquo;
    have the same width.

   <dt><var>&lt;percentage&gt;</var>

   <dd> Expresses a size as a percentage of the a-priori width. <span
    class=issue>When the width of the <a href="#grid-element1">grid
    element</a> is dependent on content, the result is undefined.</span>

   <dt>&lsquo;<code class=css>max-content</code>&rsquo;

   <dt>&lsquo;<code class=css>min-content</code>&rsquo;

   <dd> The column's width is determined by its contents. See the <a
    href="#colwidth">algorithm</a> below.

   <dt>&lsquo;<code class=css>minmax(<var>p</var>,<var>q</var>)</code>&rsquo;
    

   <dd> The column's width is constrained to be greater than or equal to
    <var>p</var> and less than or equal to <var>q</var>. <var>p</var> and
    <var>q</var> stand for [ <var>&lt;length&gt;</var> | max-content |
    min-content | * ]. There may be white space around the <var>p</var> and
    <var>q</var>. If <var>q</var> &lt; <var>p</var>, then <var>q</var> is
    ignored and &lsquo;<code
    class=css>minmax(<var>p</var>,<var>q</var>)</code>&rsquo; is treated as
    &lsquo;<code class=css>minmax(<var>p</var>,<var>p</var>)</code>&rsquo;.

   <dt>&lsquo;<code class=css>fit-content</code>&rsquo;

   <dd> Equivalent to &lsquo;<code class=css>minmax(min-content,
    max-content)</code>&rsquo;.
    <p class=issue>&lsquo;<code class=css>fit-content</code>&rsquo; is
     normally equivalent to max(min-content, max(max-content,
     fill-available)). This definition doesn't quite make sense here, but
     should the keyword be the same then? maybe &lsquo;<code
     class=css>auto</code>&rsquo;?
  </dl>

  <div class=issue> Which is easier, &lsquo;<code class=css>1fr</code>&rsquo;
   or &lsquo;<code class=css>*</code>&rsquo;? Or do we need both?
   <pre>
<!-- -->grid-template: "a . c";
<!-- -->grid-columns: 1fr 1em 3fr;</pre>
   or
   <pre>
<!-- -->grid-template: "a . c c c";
<!-- -->grid-columns: * 1em * * *;</pre>
  </div>

  <p class=issue>Do we need percentages? It seems in practice a fraction of
   the remaining space is all that is necessary.

  <p class=issue>Flex?

  <div class=example>
   <p>The following example:</p>

   <ul>
    <li>Adds one <a href="#grid-line">Grid Line</a> 100 pixels from the
     &lsquo;<a href="#start0"><code class=property>start</code></a>&rsquo; of
     the grid.

    <li>Adds another <a href="#grid-line">Grid Line</a> 1/2 of the remaining
     space away.

    <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from
     the prior <a href="#grid-line">Grid Line</a> will be based on the
     maximum content size of elements occupying the column.

    <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from
     the prior <a href="#grid-line">Grid Line</a> is based on the minimum
     content size of all elements occupying the column, or 1/2 the remaining
     space, whichever is greater.
   </ul>

   <pre>div { grid-columns: 100px 1fr max-content minmax(min-content, 1fr) }</pre>
  </div>

  <div class=example>
   <p>Additional examples of valid <a href="#grid-track">Grid Track</a>
    definitions:</p>

   <pre>/* examples of valid track definitions */
<!-- -->grid-rows: 1fr minmax(min-content, 1fr);
<!-- -->grid-rows: 10px (1fr auto minmax(30%, 1fr))[2];
<!-- -->grid-rows: (10px);
<!-- -->grid-rows: calc(4em - 5px)</pre>
  </div>

  <h3 id=grid-row-sizes><span class=secno>3.4. </span> Specifying the height
   of rows: &lsquo;<a href="#grid-rows"><code
   class=property>grid-rows</code></a>&rsquo;</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-rows>grid-rows</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>auto | <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a>+

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td><a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block
      container elements</a> <a href="#CSS21"
      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>yes, between grids with the same number of tracks

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed&nbsp;value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>The &lsquo;<a href="#grid-rows"><code
   class=property>grid-rows</code></a>&rsquo; property specifies the sizes of
   the rows of a grid. It takes the same values as &lsquo;<a
   href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;.

  <p>If an element has <a href="#number-of-rows"
   title="number of rows"><var>N</var> rows,</a> only the first <var>N</var>
   <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> values are
   used, the others are ignored. If there are fewer than <var>N</var> values,
   or if the value is &lsquo;<code class=property>auto</code>&rsquo;, the
   missing ones are all &lsquo;<code
   class=property>fit-content</code>&rsquo;.

  <h3 id=grid-shorthand><span class=secno>3.5. </span> The &lsquo;<a
   href="#grid"><code class=property>grid</code></a>&rsquo; shorthand
   property</h3>

  <p>The &lsquo;<a href="#grid"><code class=property>grid</code></a>&rsquo;
   property is a shorthand for &lsquo;<a href="#grid-template"><code
   class=property>grid-template</code></a>&rsquo;, &lsquo;<a
   href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;
   and &lsquo;<a href="#grid-rows"><code
   class=property>grid-rows</code></a>&rsquo;.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid>grid</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>none | [ [ <var>&lt;string&gt;</var> [ /
      <var>&lt;row-height&gt;</var> ]? ]+ ] <var>&lt;col-width&gt;</var>*

    <tr>
     <th>Initial:

     <td>none

    <tr>
     <th>Applies to:

     <td><a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block
      container elements</a> <a href="#CSS21"
      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>see individual properties

    <tr>
     <th>Percentages:

     <td>see individual properties

    <tr>
     <th>Computed&nbsp;value:

     <td>see individual properties

    <tr>
     <th>Canonical order:

     <td>N/A
  </table>

  <p>The &lsquo;<a href="#grid"><code class=property>grid</code></a>&rsquo;
   property is a shorthand for &lsquo;<a href="#grid-template"><code
   class=property>grid-template</code></a>&rsquo;, &lsquo;<a
   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; and
   &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo;. The value of &lsquo;<a
   href="#grid-template"><code class=property>grid-template</code></a>&rsquo;
   is the list of <var>&lt;string&gt;</var> values. The value of &lsquo;<a
   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; is the
   list of <var>&lt;row-height&gt;</var> values, with any omitted ones set to
   &lsquo;<code class=property>fit-content</code>&rsquo;. And the value of
   &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo; is the list of
   <var>&lt;col-width&gt;</var> values, or &lsquo;<code
   class=property>auto</code>&rsquo; if there are none.

  <div class=example>
   <p>For example, the rule

   <pre>grid: "a b c" "a b d"/4em * 10em</pre>

   <p>is the same as

   <pre>
grid-template: "a b c" "a b d";
grid-rows: fit-content 4em;
grid-columns: * 10em;</pre>

   <p>Note the &lsquo;<code class=css>fit-content</code>&rsquo; keyword that
    was implied in the shorthand, but must be made explicit in the &lsquo;<a
    href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo;
    property.
  </div>

  <p class=note>Note that it is not possible in the short hand to specify
   more row heights than here are rows, unlike in the &lsquo;<a
   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo;
   property, where any number of extra (but ignored), row heights can be
   added at the end.

  <h3 id=default-slots><span class=secno>3.6. </span>Default slots</h3>

  <p>Every <a href="#grid-element1">grid element</a> has a <dfn
   id=default-slot.>default slot.</dfn> If there is an asterisk (“*”) in
   the template, then that slot is the default. If there is no asterisk, then
   the first letter in the template defines the default slot.

  <div class=example>
   <p>For example, if the template is defined by &lsquo;<code
    class=css>grid-template: "..." "..c" "abb" "abb"</code>&rsquo;, then
    “c” is the default slot.
  </div>

  <p>If the grid has an <a href="#implicit-template"><em>implicit
   template</em></a> (i.e., &lsquo;<a href="#grid-template"><code
   class=property>grid-template</code></a>&rsquo; is &lsquo;<code
   class=css>none</code>&rsquo;), then the default slot is the single,
   anonymous slot of that implicit template.

  <p>All content of a grid element that is not inside another flow (e.g.,
   because it is inside a float, absolutely positioned, or positioned in a
   different slot with &lsquo;<a href="#grid-position0"><code
   class=css>[grid-]position</code></a>&rsquo;) is positioned in the default
   flow.

  <p>In particular, any text content of the grid element itself is positioned
   in the default flow.

  <div class=example>
   <p>For example, in this document fragment

   <pre>
&lt;DIV STYLE="grid: 'ab*'">
 &lt;IMG STYLE="flow: a" SRC="image.png" ALT="Foo">
 This is an
 &lt;EM STYLE="flow: *">emphasized&lt;/EM>
 &lt;EM STYLE="flow: b">(note well!)&lt;/EM>
 sentence.
 &lt;
&lt;/DIV>
</pre>

   <p>The three slots of the grid contain:

   <dl>
    <dt>Slot a

    <dd>The image

    <dt>Slot b

    <dd>The text “(note well!)”

    <dt>Default slot

    <dd>The text “This is an <em>emphasized</em> sentence.”
   </dl>
  </div>

  <h4 id=fraction-values-fr><span class=secno>3.6.1. </span> Fraction Values:
   &lsquo;<code class=property>fr</code>&rsquo;</h4>

  <p>Fraction values are new units applicable to the &lsquo;<a
   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; and
   &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo; properties:

  <dl>
   <dt>fr

   <dd>Fraction of available space.
  </dl>

  <p>The distribution of fractional space occurs after all
   <code>&lt;length&gt;</code> or content-based row and column sizes have
   reached their maximum. The total size of the rows or columns is then
   subtracted from the available space and the remainder is divided
   proportionately among the fractional rows and columns.

  <p>Each column or row's proportional share can be computed as the column or
   row's <code>&lt;fraction&gt; * &lt;remaining space&gt; / &lt;sum of all
   fractions&gt;</code>. Fractions occurring within a &lsquo;<code
   class=css>minmax()</code>&rsquo; function are only counted in the sum if
   in the <code>max</code> position. Further, fractions that occur in the
   <var>min</var> position are treated as an absolute length of &lsquo;<code
   class=css>0</code>&rsquo;.

  <p>When remaining space cannot be determined because the width or height of
   the <a href="#grid-element1"><i>grid element</i></a> is undefined,
   fraction-sized <a href="#grid-track">Grid Track</a>s are sized to their
   contents while retaining their respective proportions. In such cases the
   size of each fractional <a href="#grid-track">Grid Track</a> can be
   computed by determining the &lsquo;<code
   class=css>max-content</code>&rsquo; size of each fractional <a
   href="#grid-track">Grid Track</a> and dividing that size by the respective
   fraction. The maximum value of those results is treated as the
   &lsquo;<code class=css>1fr</code>&rsquo; value, which is then multiplied
   by each <a href="#grid-track">Grid Track</a>&lsquo;<code class=css>s
   <code>fraction</code> to determine its final size. </code>

  <h4 id=computed-values-grid-rows-and-columns><span class=secno>3.6.2.
   </span> &rsquo;&lsquo;<code
   class=css>getComputedStyle()</code>&rsquo;&lsquo;<code class=css> values
   for </code>&rsquo;grid-rows' and &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo;</h4>

  <p>The resolved size of all <a href="#grid-track">Grid Track</a>s as
   returned for the &lsquo;<a href="#grid-rows"><code
   class=property>grid-rows</code></a>&rsquo; and &lsquo;<a
   href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;
   properties via &lsquo;<code class=css>getComputedStyle()</code>&rsquo; is
   normalized to used pixel values.

  <p>All <a href="#grid-track">Grid Track</a>s are included in the computed
   value reported for &lsquo;<a href="#grid-rows"><code
   class=property>grid-rows</code></a>&rsquo; and &lsquo;<a
   href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;
   regardless of how the <a href="#grid-track">Grid Track</a>s were created,
   e.g. implicit tracks may be created by <i>grid items</i> referencing a <a
   href="#grid-line">Grid Line</a> not explicitly defined by a &lsquo;<a
   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; or
   grid-columns' property.

  <h3 id=slot-sizes><span class=secno>3.7. </span> Calculating the size of
   the grid</h3>

  <p>For the purpose of the calculations below, each slot (letter or “*”)
   in a grid has four dimensions associated with it, called <var>MINW</var>
   (“minimum width”), <var>PREFW</var> (“preferred width”),
   <var>MINH</var> (“minimum height”) and <var>PREFH</var> (“preferred
   height”). We can think of them as the minimum and preferred dimensions
   of the slot in isolation, i.e., if it wasn't constrained by other slots in
   the same row or column. They are defined as follows:

  <dl>
   <dt><var>MINW</var>

   <dd>
    <ul>
     <li>If the slot spans only columns whose width does not depend on the
      contents of the column (i.e., the column widths are specified with only
      <var>&lt;length&gt;</var> values, &lsquo;<code
      class=css>*</code>&rsquo;, <var>&lt;fraction&gt;</var> values, or any
      combination of those), then <var>MINW</var> is 0. <span
      class=note>(Note that <var>&lt;length&gt;</var> values can be specified
      with &lsquo;<code class=css>calc()</code>&rsquo; as well, see
      [CSS3VALUES]].)</span>

     <li>Otherwise, if the slot is <a
      href="#vertical-element"><em>vertical,</em></a> then <var>MINW</var> is
      the <a href="#block-dimension"><em>block dimension</em></a> of the
      slot, plus its horizontal padding, border and margin (i.e., any
      &lsquo;<code class=property>margin-left</code>&rsquo;, &lsquo;<code
      class=property>margin-right</code>&rsquo;, etc., that is set on it by
      means of the &lsquo;<a href="#slot"><code
      class=css>::slot()</code></a>&rsquo; pseudo-element).

     <li>Otherwise, if the slot spans at least one column whose width is
      specified as &lsquo;<code class=css>max-content</code>&rsquo; (or
      &lsquo;<code class=css>minmax()</code>&rsquo; with a first argument of
      &lsquo;<code class=property>max-content</code>&rsquo;), then
      <var>MINW</var> is the intrinsic preferred width (see <a
      href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>) of
      the slot plus its horizontal margin, border and padding.

     <li>Otherwise (i.e., the slot spans at least one column whose width is
      specified as &lsquo;<code class=css>min-content</code>&rsquo; or
      &lsquo;<code class=css>minmax()</code>&rsquo; with a first argument of
      &lsquo;<code class=css>min-content</code>&rsquo;, but no &lsquo;<code
      class=css>max-content</code>&rsquo;) <var>MINW</var> is the intrinsic
      minimum width (see <a href="#CSS3BOX"
      rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> of the slot, plus its
      horizontal padding, border and margin.
    </ul>

   <dt><var>PREFW</var>

   <dd>
    <ul>
     <li>If the slot spans only columns whose width does not depend on the
      contents of the column (i.e., the column widths are specified with only
      <var>&lt;length&gt;</var> values, &lsquo;<code
      class=css>*</code>&rsquo;, <var>&lt;fraction&gt;</var> values, or any
      combination of those), then <var>PREFW</var> is infinite.

     <li>Otherwise, if the slot is <a
      href="#vertical-element"><em>vertical,</em></a> then <var>PREFW</var>
      is the <a href="#block-dimension"><em>block dimension</em></a> of the
      slot, plus its horizontal padding, border and margin.

     <li>Otherwise, if the slot spans at least one column whose width is
      specified as &lsquo;<code class=css>max-content</code>&rsquo; (or
      &lsquo;<code class=css>minmax()</code>&rsquo; with a first argument of
      &lsquo;<code class=property>max-content</code>&rsquo;), then
      <var>PREFW</var> is the intrinsic preferred width (see <a
      href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>) of
      the slot plus its horizontal margin, border and padding.

     <li>Otherwise <var>PREFW</var> is the intrinsic minimum width (see <a
      href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> of the
      slot, plus its horizontal padding, border and margin.
    </ul>

   <dt><var>MINH</var>

   <dd>
    <ul>
     <li>If the slot spans only rows whose height does not depend on the
      contents of the column (i.e., the row heights are specified with only
      <var>&lt;length&gt;</var> values, &lsquo;<code
      class=css>*</code>&rsquo;, <var>&lt;fraction&gt;</var> values, or any
      combination of those), then <var>MINH</var> is 0.

     <li>Otherwise, if the slot is <a
      href="#horizontal-element."><em>horizontal,</em></a> then
      <var>MINH</var> is the <a href="#block-dimension"><em>block
      dimension</em></a> of the slot, plus its vertical padding, border and
      margin

     <li>Otherwise, if the slot spans at least one row whose height is
      specified as &lsquo;<code class=css>max-content</code>&rsquo; (or
      &lsquo;<code class=css>minmax()</code>&rsquo; with a first argument of
      &lsquo;<code class=property>max-content</code>&rsquo;), then
      <var>MINH</var> is the intrinsic preferred height (see <a
      href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>) of
      the slot plus its vertical margin, border and padding.

     <li>Otherwise <var>MINH</var> is the intrinsic minimum height (see <a
      href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> of the
      slot, plus its vertical padding, border and margin.
    </ul>

   <dt><var>PREFH</var>

   <dd>
    <ul>
     <li>If the slot spans only rows whose height does not depend on the
      contents of the column (i.e., the row heights are specified with only
      <var>&lt;length&gt;</var> values, &lsquo;<code
      class=css>*</code>&rsquo;, <var>&lt;fraction&gt;</var> values, or any
      combination of those), then <var>MINH</var> is infinite.

     <li>Otherwise, if the slot is <a
      href="#horizontal-element."><em>horizontal,</em></a> then
      <var>PREFH</var> is the <a href="#block-dimension"><em>block
      dimension</em></a> of the slot, plus its vertical padding, border and
      margin

     <li>Otherwise, if the slot spans at least one row whose height is
      specified as &lsquo;<code class=css>max-content</code>&rsquo; (or
      &lsquo;<code class=css>minmax()</code>&rsquo; with a first argument of
      &lsquo;<code class=property>max-content</code>&rsquo;), then
      <var>PREFH</var> is the intrinsic preferred height (see <a
      href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>) of
      the slot plus its vertical margin, border and padding.

     <li>Otherwise <var>PREFH</var> is the intrinsic minimum height (see <a
      href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> of the
      slot, plus its vertical padding, border and margin.
    </ul>
  </dl>

  <div class=example>
   <p>For example, the <var>MINW</var> values of the slots in this grid

   <pre>grid: "    a      a      ."
      "    b      .      c"
      fit-content *    10em</pre>

   <p>are as follows:

   <dl>
    <dt>a

    <dd>&lsquo;<code class=property>min-content</code>&rsquo; (because the
     slot spans at least one column with a width specified as &lsquo;<code
     class=property>min-content</code>&rsquo; or &lsquo;<code
     class=property>fit-content</code>&rsquo;).

    <dt>b

    <dd>&lsquo;<code class=property>min-content</code>&rsquo; (ditto).

    <dt>c

    <dd>0 (because the slot spans only columns with a width that is
     independent of the content).
   </dl>
  </div>

  <p>The UA must choose the widths and heights of all columns and rows such
   that the following constraints are satisfied.

  <ol><!-- Constraints relating to the element's own width and
   height. These constraints may be dropped if overconstrained -->

   <li>
    <p>If the element has an a-priori known content height, then the sum of
     the heights of all rows must be equal to the element's height.

    <div class=example>
     <p>For example, the two rows in this grid must be 8em each so that the
      total height matches the height of the element:

     <pre>div {
  height: 16em;
  grid: "a.b"/*
        "ac."/* }</pre>
    </div>

   <li>
    <p>If the grid element has an a-priori known content width, then the sum
     of the widths of all columns must be equal to the element's width .

    <div class=example>
     <p>For example, the three columns in this grid must be 20em each:

     <pre>div {width: 60em; grid: "abc"}</pre>
    </div>
    <!-- Constraints relating to fixed-size rows and columns -->

   <li>Each row with a height specified as a <var>&lt;length&gt;</var> must
    have exactly that height.

   <li>Each column with a width specified as a <var>&lt;length&gt;</var> must
    have exactly that width.
    <!-- Constraints on rows and column with fractional sizes. -->

   <li>All rows with a height specified as &lsquo;<code
    class=css>*</code>&rsquo; must have the same height.
    <p class=issue>If we have both &lsquo;<code class=css>*</code>&rsquo; and
     &lsquo;<code class=property>fr</code>&rsquo;, then &lsquo;<code
     class=css>*</code>&rsquo; will be defined as &lsquo;<code
     class=css>1fr</code>&rsquo; and we can drop this rule and the next.
     Otherwise either these two rules or the next two must be removed.

   <li>All columns with a width specified as &lsquo;<code
    class=css>*</code>&rsquo; must have the same width.

   <li>For any pair (<var>i</var>,<var>j</var>) of rows whose
    <var>&lt;row-height&gt;</var> values h<sub>i</sub> and h<sub>j</sub> are
    both specified in &lsquo;<code class=property>fr</code>&rsquo;, the
    computed heights H<sub>i</sub> and H<sub>j</sub> must be such that
    H<sub>i</sub> * h<sub>j</sub> = H<sub>j</sub> * h<sub>i</sub>. (I.e.,
    their heights are proportional to their number of &lsquo;<code
    class=property>fr</code>&rsquo; units.)

   <li>For any pair (<var>i</var>,<var>j</var>) of columns whose
    <var>&lt;col-width&gt;</var> values w<sub>i</sub> and w<sub>j</sub> are
    both specified in &lsquo;<code class=property>fr</code>&rsquo;, the
    computed width W<sub>i</sub> and W<sub>j</sub> must be such that
    W<sub>i</sub> * w<sub>j</sub> = W<sub>j</sub> * W<sub>i</sub>. (I.e.,
    their widths are proportional to their number of &lsquo;<code
    class=property>fr</code>&rsquo; units.)
    <!-- Constraints relating to rows and columns without slots that
   span into other rows or columns, i.e., cases where the size of a
   slot can be used to put an upper limits on the size of a row or
   column -->
    

   <li>
    <p>Each row that contains slots that span only one row and no slots that
     span more than one row, must not be higher than the largest
     <var>PREFH</var> of all slots in the row.

    <div class=example>
     <p>For example, the second row in this grid

     <pre>grid: "a.c.." / 5em
      "....b" / fit-content</pre>

     <p>must not be taller than the height (<a href="#block-dimension">block
      dimension</a>) of slot b. The first row contains a slot that spans two
      rows (slot a), so this rule does not apply to that row.
    </div>

   <li>
    <p>Each column that contains slots that span only one column and no slots
     that span more than one column, must not be wider than the largest
     <var>PREFW</var> of all slots in the column.

    <div class=example>
     <p>For example, in this grid

     <pre>grid: "ac"
      "ab"
      fit-content *</pre>

     <p>the first column must not be wider than the <var>PREFW</var> of slot
      a. Both slots in the second column have an infinite <var>PREFW</var>,
      so this rule effectively puts no constraint on that column.
    </div>
    <!-- Constraints on slots, only to set lower limits.  -->

   <li>Each slot must be at least as wide as its <var>MINW</var>.

   <li>Each slot must be at least as high as its <var>MINH</var>.
  </ol>

  <p>If it is impossible to choose such widths and heights, then try without
   constraint 1. If it is still impossible, try without constraint 2 instead.
   And, finally, try with both 1 and 2 dropped.

  <div class=example>
   <p>For example, the sum of the row heights in this example can never be
    the same as the height of the element:

   <pre>div {
  height: 20em;
  grid: "a b c" / 7em
        "a . c" / 7em }
</pre>

   <p>The first constraint is therefore ignored, the rows are 7em each and
    6em of space below the grid remains empty.
  </div>

  <p>If there are multiple solutions, and constraint 1 was dropped or did not
   apply, then the sizes must additionally be chosen such that the sum of the
   heights of the rows is minimized.

  <p>If there are still multiple solutions, and constraint 2 was dropped or
   did not apply, then the sizes must additionally be chosen such that the
   sum of the widths of the columns is minimized.

  <div class=example>
   <p>For example, there would be multiple solutions for this grid:

   <pre>&lt;DIV STYLE="float: left; grid: "a.b">
 &lt;P STYLE="flow: a">Two words
 &lt;P STYLE="flow: b">Only three words
&lt;/DIV></pre>

   <p>The columns must have equal width, but there is no other constraint on
    the width. They could be narrow:

   <blockquote>
    <p><code class=visible style="display:     inline-block">Two  <br>
     words<br>
          </code><code class=visible
     style="display: inline-block">     <br>
          <br>
          </code><code class=visible
     style="display:     inline-block">Only <br>
     three<br>
     words</code>
   </blockquote>

   <p>or wider:

   <blockquote>
    <p><code class=visible
     style="display:     inline-block">Two words       </code><code
     class=visible
     style="display: inline-block">                </code><code
     class=visible
     style="display:     inline-block">Only three words</code>
   </blockquote>

   <p>or even wider still, e.g.:

   <blockquote>
    <p><code class=visible
     style="display:     inline-block">Two words          </code><code
     class=visible
     style="display: inline-block">                   </code><code
     class=visible
     style="display:     inline-block">Only three words   </code>
   </blockquote>

   <p>The rule to minimize height excludes the first, narrow solution. The
    rule to minimize width excludes the third and all wider solutions. So the
    second layout, the narrowest that has all words on one line, is the
    correct one.

   <p>(This example assumes the width of the floating DIV's containing block
    is large enough. The default width of a float is actually &lsquo;<code
    class=property>fit-content</code>&rsquo;, and thus if the containing
    block is too narrow, the result will be narrower, too, because the
    calculation will have to be redone using that width as the a-priori width
    for the DIV.)
  </div>

  <p class=note>The width isn't known a-priori, if, e.g., &lsquo;<code
   class=property>width</code>&rsquo; is &lsquo;<code
   class=css>auto</code>&rsquo; and the element is floating, absolutely
   positioned, inline-block or a child of a block with vertical writing mode.
   

  <p>An extra step may be necessary in paged media if a page break occurs
   inside a template (only in the case of an <em>element-based template,</em>
   see <a href="#element-based-page-break">below</a>). If the template, after
   computing the width and height, is too big to fit on the current page, and
   if a suitable break point exists, the part of the template after that
   break point is put on the next page. The width of the containing block on
   that page may be different if that page has different margins from the
   current page (see <a href="#CSS3PAGE"
   rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>) and thus the width and
   height of that part of the template must be recalculated in the new
   context.

  <p class=note>Note that the widths of the columns can be completely
   determined before laying out any of the contents as long as there are no
   columns with a <var>&lt;col-width&gt;</var> of &lsquo;<code
   class=css>min-content</code>&rsquo; or &lsquo;<code
   class=css>max-content</code>&rsquo;.

  <p class=issue>Do we define restrictions or approximations for slots that
   are part of a <em>chain</em> to avoid complicated optimization algorithms?
   

  <p class=note>Note: In a future update of CSS, rows might get a property to
   specify how the height of that row is adjusted in case the above
   calculation yields a template that is less tall than the element itself.

  <p>The height of a slot is measured as if the slot had one <dfn
   id=anonymous-block title="anonymous block of a slot">anonymous block</dfn>
   as a child that contains all the slot's contents and the anonymous block
   is a <em>flow root</em> (see <a href="#CSS3BOX"
   rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>).

  <div class=example>
   <p>This example divides the window in three rows and three columns,
    separated by 1em of white space. The middle row and the middle column are
    flexible, the others are fixed at a specific size. The first column is
    5em wide, the last one 10em.

   <pre>
&lt;style type="text/css"&gt;
  body {
    height: 100%;
    display: "a   .   b   .   c"  /2em
             ".   .   .   .   ."  /1em
             "d   .   e   .   f"
             ".   .   .   .   ."  /1em
             "g   .   h   .   i"  /2em
             5em 1em  *  1em 10em}
  #logo {position: a}
  #motto {position: b}
  #date {position: c}
  #main {position: e}
  #adv {position: f}
  #copy {position: g}
  #about {position: h}
&lt;/style&gt;
&lt;p id=logo&gt;&lt;img src=...
&lt;p id=motto&gt;Making Web pages since 1862
&lt;p id=date&gt;August 2, 2004
...</pre>
  </div>

  <p class=issue>[Add example with three columns, first two as narrow as
   possible, third one taking up all remaining space.]

  <h2 id=positioning><span class=secno>4. </span> Positioning content into a
   grid element</h2>

  <p><em>This section until the next subsection is not normative.</em>

  <p>Grids can be used in two different ways to position content. The first
   way is to flow content into slots (either into explicit slots identified
   by letters, or the default slot “*”). Each slot is an individual flow
   root (“establishes a block formatting context” in the terminology of
   CSS level 2), very much like a table cell.

  <p>The second way is to absolutely position elements using four <a
   href="#grid-line"><em>grid lines</em></a> to specify the positions of the
   four margin edges of the element. Like other positioned elements
   (&lsquo;<code class=css>absolute</code>&rsquo; or &lsquo;<code
   class=css>relative</code>&rsquo;, see <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), these elements can overlap
   each other and the &lsquo;<code class=property>z-index</code>&rsquo;
   property applies to them.

  <h3 id=flow><span class=secno>4.1. </span> Flowing content into slots:
   &lsquo;<a href="#flow0"><code class=property>flow</code></a>&rsquo;</h3>

  <p>The &lsquo;<a href="#flow0"><code class=property>flow</code></a>&rsquo;
   property adds an element to a slot.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=flow0>flow</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>auto | <var>&lt;identifier&gt;</var> | &lsquo;<code
      class=css>*</code>&rsquo;

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td>elements with &lsquo;<code class=property>position</code>&rsquo;
      equal to &lsquo;<code class=property>static</code>&rsquo; or
      &lsquo;<code class=property>relative</code>&rsquo;

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed&nbsp;value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>If the value is not &lsquo;<code class=property>auto</code>&rsquo;, the
   element is added to the flow of the given slot, instead of to the flow of
   its parent.

  <p>If the element has no <a href="#grid-ancestor">grid ancestor</a>, or
   that grid ancestor has no slot of the given name, the effect is the same
   as for &lsquo;<code class=property>auto</code>&rsquo;.

  <div class=issue>
   <p>If the letter refers to a slot that doesn't exist in the element's <a
    href="#grid-ancestor"><em>grid ancestor</em></a> (or there is no grid
    ancestor) what is the effect?

   <ol>
    <li>The element is not positioned (i.e., it is positioned in the current
     flow).

    <li>The letter is looked for in the grid ancestor's own grid ancestor,
     etc., recursively. If no slot of that name is found in any of them, then
     the element is not positioned.

    <li>The element is positioned in the default slot (i.e., as if &lsquo;<a
     href="#grid-position0"><code class=css>[grid-]position:
     *</code></a>&rsquo; had been specified); or not positioned at all, in
     case there is no grid ancestor.

    <li>The letter is looked for in the grid ancestor's own grid ancestor,
     etc., recursively. If no slot of that name is found in any of them, then
     the element is positioned in the default slot.
   </ol>
  </div>

  <p>All content flowed into the same slot, whether explicitly with &lsquo;<a
   href="#flow0"><code class=property>flow</code></a>&rsquo; or implicitly by
   flowing into the default slot, forms a single flow, with content in
   document order. The slot establishes a block formatting context and
   becomes the containing block of the resulting content flow. The boxes of
   elements flowed into the same slot explicitly (by means of &lsquo;<a
   href="#flow0"><code class=property>flow</code></a>&rsquo;) are each others
   siblings in the slot.

  <p>The content flowed into a slot does not inherit properties from the
   slot.

  <div class=example>
   <p>For example, the style sheet

   <pre>BODY {grid: "a." ".b"}
.paris {flow: a}
.london {flow: b}</pre>

   <p>with this document

   <pre>
&lt;DIV CLASS=london>
 &lt;P>The...
 &lt;DIV CLASS=paris>
  &lt;P>The...
  &lt;DIV CLASS=london>
   &lt;P>The...
  &lt;/DIV>
 &lt;/DIV>
&lt;/DIV></pre>

   <p>causes the second and third DIVs to be taken out of their parents. The
    second DIV becomes the first child of slot a (i.e., of the pseudo-element
    called &lsquo;<code class=css>::slot(a)</code>&rsquo;). The third DIV
    becomes the sibling of the first DIV, because both are added to slot b
    independently.
  </div>

  <p class=note>Note that &lsquo;<a href="#flow0"><code
   class=property>flow</code></a>&rsquo; applies to floating elements: they
   are floated relative to their containing block, and if their &lsquo;<a
   href="#flow0"><code class=property>flow</code></a>&rsquo; property
   indicates a slot in a grid, that slot is their containing block. See also
   <a href="#float">“Floating elements inside templates”</a> below.

  <p class=issue>What if the numbers refer to a non-existing row or column?
   Automatically created (see repeating below)? Ignored?

  <h3 id=absolute-positioning-using-a-grid-grid-c><span class=secno>4.2.
   </span> Absolute positioning using a grid: &lsquo;<a
   href="#grid-column"><code class=property>grid-column</code></a>&rsquo; and
   &lsquo;<a href="#grid-row"><code class=property>grid-row</code></a>&rsquo;</h3>

  <p class=issue>Trying to combine &lsquo;<code
   class=css>grid-row/column</code>&rsquo; and &lsquo;<code
   class=css>grid-row/column-span</code>&rsquo;, because they should not
   cascade independently. (If one style rule tries to place by start/end
   lines, and another tries to place by span, the result of the cascade will
   be a mess.)

  <p>The &lsquo;<a href="#grid-column"><code
   class=property>grid-column</code></a>&rsquo; and &lsquo;<a
   href="#grid-row"><code class=property>grid-row</code></a>&rsquo;
   properties can be used to absolutely position an element relative to a
   grid.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-row>grid-row</dfn>, <dfn
      id=grid-column>grid-column</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>auto | <var>&lt;identifier&gt;</var> | &lsquo;<code
      class=css>*</code>&rsquo; | <var>&lt;grid-track&gt;</var>

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td>elements with &lsquo;<code class=css>position:
      absolute</code>&rsquo;

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed&nbsp;value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>Here

  <pre
   class=prod><var>&lt;grid-track&gt;</var> = <var>&lt;integer&gt;</var> <var>&lt;integer&gt;</var>?
  </pre>

  <p>If the value of either or both of these properties is &lsquo;<code
   class=property>auto</code>&rsquo;, the element is not positioned relative
   to a grid, but is positioned using &lsquo;<code
   class=property>top</code>&rsquo;, &lsquo;<code
   class=property>right</code>&rsquo;, &lsquo;<code
   class=property>bottom</code>&rsquo; and &lsquo;<code
   class=property>left</code>&rsquo; (see <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>).

  <p>If the value is an identifier or &lsquo;<code class=css>*</code>&rsquo;,
   the element is positioned such that its top and bottom margin edges (for
   &lsquo;<a href="#grid-rows"><code
   class=property>grid-rows</code></a>&rsquo;) or its left and right margin
   edges (for &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo;) align with the
   corresponding margin edges of the slot of that name in the element's <a
   href="#grid-ancestor">grid ancestor.</a> (&lsquo;<code
   class=css>*</code>&rsquo; refers to the <a href="#default-slot.">default
   slot.</a>) The &lsquo;<code class=property>top</code>&rsquo;, &lsquo;<code
   class=property>right</code>&rsquo;, &lsquo;<code
   class=property>bottom</code>&rsquo; and &lsquo;<code
   class=property>left</code>&rsquo; properties do not apply.

  <div class=example>
   <p>For example, these rules

   <pre>
DIV {grid: "ab" "cd"}
P {grid-row: a; grid-column: d}
   </pre>

   <p>are valid and mean that any P spans the same rows as slot a and spans
    the same columns as slot c. (In this case, that means it coincides with
    slot b.)
  </div>

  <p>If the value is given as &lsquo;<code
   class=css><var>&lt;grid-track&gt;</var></code>&rsquo; and the second
   number is omitted, it is equal to the first + 1.

  <p>If the value is given as &lsquo;<code
   class=css><var>&lt;grid-track&gt;</var></code>&rsquo;, the element is
   positioned such that its top and bottom margin edges (for &lsquo;<a
   href="#grid-row"><code class=property>grid-row</code></a>&rsquo;) or left
   and right margin edges (for &lsquo;<a href="#grid-column"><code
   class=property>grid-column</code></a>&rsquo;) align with the <a
   href="#grid-line"><em>grid lines</em></a> indicated by the two numbers.
   The &lsquo;<code class=property>top</code>&rsquo;, &lsquo;<code
   class=property>right</code>&rsquo;, &lsquo;<code
   class=property>bottom</code>&rsquo; and &lsquo;<code
   class=property>left</code>&rsquo; properties do not apply.

  <p>It is an error if the second number is less than the first, or if either
   number is zero.

  <p class=issue>Use negative number to count from the right/bottom?

  <p>Note that it is legal to specify the same edge twice, e.g. &lsquo;<code
   class=css>grid-rows: 1 1</code>&rsquo;. This simply makes a margin box
   with zero height.

  <p>If the element has no grid ancestor, or the value is a name that does
   not appear in its grid ancestor, or the value refers to grid lines that do
   not exist in the grid ancestor, then the effect is the same as if
   &lsquo;<code class=property>auto</code>&rsquo; had been specified.

  <p class=issue>This needs to be worked into the constraints for the
   calculation of the grid size, so that these absolutely positioned elements
   also contribute to the calculation of &lsquo;<code
   class=property>min-content</code>&rsquo; and &lsquo;<code
   class=property>max-content</code>&rsquo;.

  <h3 id=grid-position><span class=secno>4.3. </span> The &lsquo;<a
   href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo; shorthand property</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-position0>grid-position</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>auto | <var>&lt;identifier&gt;</var> | &lsquo;<code
      class=css>*</code>&rsquo; | <var>&lt;grid-track&gt;</var> /
      <var>&lt;grid-track&gt;</var>

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td>elements with &lsquo;<code class=css>position:
      absolute</code>&rsquo;

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed&nbsp;value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>This is a shorthand for &lsquo;<a href="#grid-column"><code
   class=property>grid-column</code></a>&rsquo; and &lsquo;<a
   href="#grid-row"><code class=property>grid-row</code></a>&rsquo;. The
   values have the following meaning:

  <dl>
   <dt>&lsquo;<code class=css>auto</code>&rsquo;

   <dd>Same as setting &lsquo;<a href="#grid-column"><code
    class=property>grid-column</code></a>&rsquo; and &lsquo;<a
    href="#grid-row"><code class=property>grid-row</code></a>&rsquo; both to
    auto.

   <dt><var>&lt;identifier&gt;</var>

   <dd>Same as setting &lsquo;<a href="#grid-column"><code
    class=property>grid-column</code></a>&rsquo; and &lsquo;<a
    href="#grid-row"><code class=property>grid-row</code></a>&rsquo; both to
    this value.

   <dt>&lsquo;<code class=css>*</code>&rsquo;

   <dd>Same as &lsquo;<a href="#grid-column"><code
    class=property>grid-column</code></a>&rsquo; and &lsquo;<a
    href="#grid-row"><code class=property>grid-row</code></a>&rsquo; both to
    &lsquo;<code class=css>*</code>&rsquo;.

   <dt><var>&lt;grid-track&gt;</var> / <var>&lt;grid-track&gt;</var>

   <dd>Same as setting &lsquo;<a href="#grid-column"><code
    class=property>grid-column</code></a>&rsquo; to the value before the
    slash (&lsquo;<code class=css>/</code>&rsquo;) and &lsquo;<a
    href="#grid-row"><code class=property>grid-row</code></a>&rsquo; to the
    value after the slash.
  </dl>

  <p class=note>Note that some combinations cannot be expressed in the
   shorthand, e.g., &lsquo;<code class=css>grid-column: a; grid-row:
   b</code>&rsquo;. On the other hand, &lsquo;<code class=css>grid-column:
   auto; grid-row: b</code>&rsquo; is the same as &lsquo;<code
   class=css>grid-position: auto</code>&rsquo;

  <p class=issue>It is also possible to re-use &lsquo;<code
   class=property>position</code>&rsquo; instead of a new &lsquo;<a
   href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo; property. Advantage: no new
   property to learn. Disadvantage: difficult to make &lsquo;<code
   class=property>position</code>&rsquo; into a shorthand for &lsquo;<a
   href="#grid-column"><code class=property>grid-column</code></a>&rsquo; and
   &lsquo;<a href="#grid-row"><code
   class=property>grid-row</code></a>&rsquo;.

  <div class=issue>
   <p>css3-grid-align allows to define a position either by saying how many
    rows/columns it spans, or by saying at which row and column it ends. Some
    possible interpretations of four numbers:

   <ol>
    <li>&lsquo;<code class=css>1 5 / 3 4</code>&rsquo; = start at column 1
     row 3, span 5 columns and 4 rows
     <pre>
. . . . . . .
. . . . . . .
x x x x x . .
x x x x x . .
x x x x x . .
x x x x x . .
. . . . . . .
</pre>

    <li>&lsquo;<code class=css>1 to 5 / 3 to 4</code>&rsquo; = start at
     column 1 row 3, end with column 5 row 4
     <pre>
. . . . . . .
. . . . . . .
x x x x x . .
x x x x x . .
. . . . . . .
. . . . . . .
. . . . . . .
</pre>

    <li>&lsquo;<code class=css>1 to 5 / 3 to 4</code>&rsquo; = start at
     column 1 row 3, end <em>before</em> column 5 row 4
     <pre>
. . . . . . .
. . . . . . .
x x x x . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
</pre>
   </ol>

   <p>Do we need only one? Which one is the easiest to remember?
  </div>

  <p class=issue>Do we need keywords such as &lsquo;<code
   class=css>same</code>&rsquo; (position into same slot as the preceding
   element with the same grid ancestor), &lsquo;<code
   class=css>next-row</code>&rsquo; (position into the next slot below the
   preceding element with the same grid ancestor), &lsquo;<code
   class=css>next-column'; or </code>&rsquo;next'&lsquo;<code class=css>?
   </code>

  <h3 id=float><span class=secno>4.4. </span> Floating elements inside
   templates</h3>

  <p>An element may be positioned inside a template (with &rsquo;flow') and
   be a floating element (&lsquo;<code class=property>float</code>&rsquo;
   property) at the same time. The following cases must be distinguished:

  <dl>
   <dt><a
    href="http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/#page-floats">Page
    floats</a>

   <dd>
    <p>For the purpose of page floats <a href="#CSS3PAGE"
     rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>, the slot acts as a
     page.

    <p class=example>For example, if an element has &lsquo;<code
     class=css>float: top</code>&rsquo;, it floats to the top of the slot (or
     the top of the current column, if it has a <span>multicolumn
     element</span> as ancestor that is nearer than its <a
     href="#grid-ancestor">grid ancestor</a>).

   <dt>Other floats

   <dd>
    <p>In other cases, the element floats normally within its containing
     block, which in this case is its slot in the template (as defined <a
     href="#containing-block">above</a>).
  </dl>

  <h2 id=slot-pseudo><span class=secno>5. </span>Styling named slots: the
   &lsquo;<a href="#slot"><code class=css>::slot()</code></a>&rsquo;
   pseudo-element</h2>

  <p>The slots of a <a href="#grid-element1"><i>grid element</i></a> can be
   individually addressed with the <dfn id=slot0>&lsquo;<code
   class=css>::slot()</code>&rsquo;</dfn> pseudo-element.

  <div class=example>
   <p>For example, the following sets the background color and vertical
    alignment of some of the slots in a template:

   <pre>
<!-- -->body { grid: "aaa"
<!-- -->             "bcd" }
<!-- -->body::slot(b) { background: #FF0 }
<!-- -->body::slot(c), body::slot(d) { vertical-align: bottom }</pre>
  </div>

  <p class=issue>The &lsquo;<a href="#slot"><code
   class=css>::slot()</code></a>&rsquo; pseudo-element can also be used to
   create slots that overlap with other slots?

  <div class="example issue">
   <p>For example, the following creates a slot that overlaps two other
    slots. The slot z starts at the top left and is one column wide and two
    rows high, overlapping the left third of the a slot and the whole of the
    b slot.

   <pre>
<!-- -->body { grid: "aaa"
<!-- -->             "bcd" }
<!-- -->body::slot(foo) { position: 1 1 / 1 2 }</pre>
  </div>

  <p>If a &lsquo;<a href="#slot"><code class=css>::slot()</code></a>&rsquo;
   pseudo-element refers to a name that already exists in the element's grid
   template, than any &lsquo;<code class=property>position</code>&rsquo;
   property on that pseudo-element is ignored.

  <p>If a &lsquo;<a href="#slot"><code class=css>::slot()</code></a>&rsquo;
   pseudo-element defines a new slot that coincides exactly with another slot
   in the element's grid element, then it is in fact the same slot, and the
   new name is an alias for that slot. <span class=issue>Unless it has a
   different &lsquo;<code class=property>z-index</code>&rsquo;? Or are slots
   independent, even if they have the same position?</span>

  <p>Only the following properties apply to the &lsquo;<a href="#slot"><code
   class=css>:slot()</code></a>&rsquo; pseudo-element:

  <ul>
   <li>background properties

   <li>&lsquo;<code class=property>vertical-align</code>&rsquo; (see <a
    href="#vertical-align">“vertical alignment”</a> below)

   <li>&lsquo;<code class=property>overflow</code>&rsquo; (see the sections
    on <a href="#vertical-align">vertical alignment</a> and <a
    href="#paged">paged media</a> below)

   <li class=issue>&lsquo;<a href="#writing-mode"><code
    class=property>writing-mode</code></a>&rsquo; (The default writing mode
    of a slot is the writing mode of the grid element itself.)

   <li class=issue>&lsquo;<code class=property>direction</code>&rsquo;

   <li>&lsquo;<code class=property>box-shadow</code>&rsquo;

   <li>border properties <span class=issue>(<a
    href="http://www.w3.org/Style/CSS/Tracker/issues/37">ISSUE-37:</a> Can a
    slot have a border and if so, where is it drawn?)</span>

   <li>padding properties

   <li>&lsquo;<code class=property>box-decoration-break</code>&rsquo;

   <li>column properties

   <li>&lsquo;<code class=property>content</code>&rsquo; <span
    class=issue>Useful? Gives the first content for the slot, more can be
    added by positioning other elements in the slot.)</span>

   <li class=issue>margins [to align the contents of the slot to sides or
    center with &lsquo;<code class=property>auto</code>&rsquo;]

   <li class=issue>&lsquo;<code class=property>z-index</code>&rsquo; [if
    margins can be negative, slots can overlap]
  </ul>

  <p>The background of a slot is drawn immediately on top of the background
   of the element itself. E.g., the background set on &lsquo;<code
   class=css>P::slot(a)</code>&rsquo; is immediately in front of the
   background set on &lsquo;<code class=css>P</code>&rsquo;.

  <p class=issue>Need to define the width when a slot has padding and border,
   including when the width is too small.

  <p class=issue>Do the margins of a slot collapse with the margins of
   elements that are flowed into the slot?

  <h2 id=slot-layout><span class=secno>6. </span> Layout within a slot</h2>

  <p class=issue>Can use the margins of the &lsquo;<a href="#slot"><code
   class=css>::slot()</code></a>&rsquo;&lsquo;<code class=css> pseudo, or
   re-use the </code>&rsquo;vertical-align' property (bottom, top, middle,
   baseline), or a new property (&lsquo;<code
   class=property>flex-align</code>&rsquo;?) [Using &lsquo;<code
   class=property>margin</code>&rsquo; means there needs to be another
   property if baseline alignment is required.]

  <div class=sidefigure>
   <div class=figure>
    <p><img alt=FIXME src="images/horizontal-tb-dir-ltr.png">

    <p class=caption>Latin-based language row and column orientation.</p>
   </div>

   <div class=figure>
    <p><img alt=FIXME src="images/horizontal-tb-dir-rtl.png">

    <p class=caption>Arabic language row and column orientation.</p>
   </div>

   <div class=figure>
    <p><img alt=FIXME src="images/vertical-rl.png">

    <p class=caption>East Asian language row and column orientation.</p>
   </div>
  </div>

  <p>A <i>grid item</i>&lsquo;<code class=css>s alignment within its Cell can
   be controlled by using the </code>&rsquo;grid-column-align' and &lsquo;<a
   href="#grid-row-align"><code
   class=property>grid-row-align</code></a>&rsquo; properties. Alignment
   refers to the logical edges of the <i>grid item</i>&lsquo;<code
   class=css>s <a href="#slot"><i>slot</i></a>. </code>

  <p>The <dfn id=start>start</dfn> edge of a column is defined by the inline
   base direction. The <dfn id=start0>start</dfn> edge of a row is defined by
   block flow direction. The alignment values refer to the edge of the
   <i>grid item</i>&rsquo;s slot against which the <i>grid item</i> will
   align one of its edges. Which edge of the <i>grid item</i> actually aligns
   against the specified edge of the Cell is dependent on whether the <i>grid
   item</i> shares the same inline text direction and block flow direction as
   the <a href="#grid-element1"><i>grid element</i></a>. All descriptions
   below assume that the <i>grid item</i> shares the same inline text
   direction and block flow direction as the <a href="#grid-element1"><i>grid
   element</i></a>. Refer to the <a
   href="http://www.w3.org/TR/css3-writing-modes/">CSS Writing Modes Module
   Level 3</a> for more details about the relationship between parent and
   child elements with differing writing-modes, and for the definitions of
   inline direction and block flow direction. <a href="#CSS3-WRITING-MODES"
   rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>

  <div class=example>
   <p>The next three figures illustrate the placement and orientation of the
    <a href="#grid-element1"><i>grid element</i></a>&lsquo;<code class=css>s
    rows, columns, and <i>grid items</i> using different writing modes on the
    <a href="#grid-element1"><i>grid element</i></a>. In each of the figures,
    the markup shown in the following example is used to place <i>grid
    item</i> A in column 1, row 1, and <i>grid item</i> B in column 2, row 2.
    <i>Grid item</i> A is aligned in each figure to the starting edges of its
    row and column. <i>Grid item</i> B is aligned in each figure to the
    ending edges of its row and column. </code>

   <pre class=example>&lt;style type="text/css"&gt;
    #grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr }
    #A { grid-column: 1; grid-row: 1; grid-column-align: start; grid-row-align: start }
    #B { grid-column: 2; grid-row: 2; grid-column-align: end; grid-row-align: end }
&lt;/style&gt;

&lt;div id="grid"&gt;
    &lt;div id="A"&gt;A&lt;/div&gt;
    &lt;div id="B"&gt;B&lt;/div&gt;
&lt;/div&gt;</pre>
  </div>

  <h3 id=alignment><span class=secno>6.1. </span> Alignment</h3>

  <p class=issue>We need a general way to align and center content and
   elements in a fixed-size parent. The Positioning module proposes
   &rsquo;position: center', but it only applies to absolutely positioned
   elements and it only centers. &lsquo;<code class=css>Auto</code>&rsquo;
   margins are limited to aligning horizontally and they fail to center when
   the element is wider than its parent. &lsquo;<code
   class=property>Vertical-align</code>&rsquo; applies to table cells and
   could apply to slots (and it has a useful &lsquo;<code
   class=css>baseline</code>&rsquo; value), but only aligns vertically.
   &lsquo;<code class=css>Text-align: center</code>&rsquo; fails to center
   when there is a float next to the line box&hellip;

  <table class=propdef id=grid-column-align-property>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-column-align>grid-column-align</dfn>

    <tr>
     <th>Value:

     <td>&lsquo;<a href="#start0"><code
      class=property>start</code></a>&rsquo; | &lsquo;<code
      class=property>end</code>&rsquo; | &lsquo;<code
      class=property>center</code>&rsquo; | &lsquo;<code
      class=property>stretch</code>&rsquo;

    <tr>
     <th>Initial:

     <td>&lsquo;<code class=property>stretch</code>&rsquo;

    <tr>
     <td>Applies to:

     <td>Grid Item elements

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>n/a

    <tr>
     <td>Computed value:

     <td>specified value
  </table>

  <dl>
   <dt><dfn id=start1>&lsquo;<code class=css>start</code>&rsquo;</dfn>

   <dd> Aligns the starting edge of the <i>grid item</i>&lsquo;<code
    class=css>s margin box to the starting edge of the <i>grid
    item</i></code>&rsquo;s column.

   <dt><dfn id=end>&lsquo;<code class=css>end</code>&rsquo;</dfn>

   <dd> Aligns the end edge of the <i>grid item</i>&lsquo;<code class=css>s
    margin box to the end edge of the <i>grid item</i></code>&rsquo;s column.
    

   <dt><dfn id=center>&lsquo;<code class=css>center</code>&rsquo;</dfn>

   <dd> Places the center of the <i>grid item</i>&lsquo;<code class=css>s
    margin box at the center of the <i>grid item</i></code>&rsquo;s
    column.

   <dt><dfn id=stretch>&lsquo;<code class=css>stretch</code>&rsquo;</dfn>

   <dd> Ensures that the <i>grid item</i>&lsquo;<code class=css>s margin box
    is equal to the size of the <i>grid item</i></code>&rsquo;s column.
  </dl>

  <table class=propdef id=grid-row-align-property>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=grid-row-align>grid-row-align</dfn>

    <tr>
     <th>Value:

     <td>&lsquo;<a href="#start0"><code
      class=property>start</code></a>&rsquo; | &lsquo;<code
      class=property>end</code>&rsquo; | &lsquo;<code
      class=property>center</code>&rsquo; | &lsquo;<code
      class=property>stretch</code>&rsquo;

    <tr>
     <td>Initial:

     <td>&lsquo;<code class=property>stretch</code>&rsquo;

    <tr>
     <td>Applies to:

     <td>Grid Item elements

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>n/a

    <tr>
     <td>Computed value:

     <td>specified value
  </table>

  <dl>
   <dt><dfn id=start2>&lsquo;<code class=css>start</code>&rsquo;</dfn>

   <dd> Aligns the starting edge of the <i>grid item</i>&lsquo;<code
    class=css>s margin box to the starting edge of the <i>grid
    item</i></code>&rsquo;s row.

   <dt><dfn id=end0>&lsquo;<code class=css>end</code>&rsquo;</dfn>

   <dd> Aligns the end edge of the <i>grid item</i>&lsquo;<code class=css>s
    margin box to the end edge of the <i>grid item</i></code>&rsquo;s row.

   <dt><dfn id=center0>&lsquo;<code class=css>center</code>&rsquo;</dfn>

   <dd> Places the center of the <i>grid item</i>&lsquo;<code class=css>s
    margin box at the center of the <i>grid item</i></code>&rsquo;s row.

   <dt><dfn id=stretch0>&lsquo;<code class=css>stretch</code>&rsquo;</dfn>

   <dd> Ensures that the <i>grid item</i>&lsquo;<code class=css>s margin box
    is equal to the size of the <i>grid item</i></code>&rsquo;s row.
  </dl>

  <h3 id=sizing><span class=secno>6.2. </span> Calculating the Size of Grid
   Items</h3>

  <p>The values &lsquo;<a href="#start0"><code
   class=css>start</code></a>&rsquo;, &lsquo;<code
   class=css>end</code>&rsquo;, and &lsquo;<code
   class=css>center</code>&rsquo; all cause the <i>grid item</i> to produce a
   box sized shrink-to-fit for its cell in accordance with the <a
   href="http://www.w3.org/TR/css3-box/#shrink-to-fit">CSS3 Box Model</a>.
   Note that percentage lengths specified on a <i>grid item</i> resolve
   against the dimensions of the <i>grid slot</i> (i.e. the slot serves as
   the containing block for the <i>grid item</i>). Percentages specified for
   margin-top, padding-top, margin-bottom, and padding-bottom resolve against
   the height of the grid cell, rather than the width of the grid slot. If
   the <i>min-content</i> size of the <i>grid item</i>&lsquo;<code
   class=css>s box is greater than the size of its slot, it will overflow the
   bounds of its slot in a direction determined by its alignment. </code>

  <p>A value of &rsquo;&lsquo;<code
   class=property>stretch</code>&rsquo;&lsquo;<code class=css> causes the
   <i>grid item</i></code>&rsquo;s to take the <i>fill-available</i> size.
   Note that this calculation is symmetric for both the width and height of
   the <i>grid item</i>.

  <h3 id=vertical-alignment><span class=secno>6.3. </span> Vertical alignment</h3>

  <p>The &lsquo;<code class=property>vertical-align</code>&rsquo; property of
   a &lsquo;<a href="#slot"><code class=css>::slot()</code></a>&rsquo;
   pseudo-element can be used to align content vertically in a slot. We
   assume the content of a slot is wrapped in an anonymous block box (similar
   to the cell box in a table cell, see <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). That box is aligned inside
   the slot according to the value of &lsquo;<code
   class=property>vertical-align</code>&rsquo;:

  <dl>
   <dt>&lsquo;<code class=css>bottom</code>&rsquo;

   <dd>The content of the slot is aligned to the bottom of the slot: the
    bottom margin edge of the anonymous block coincides with the bottom of
    the slot.

   <dt>middle

   <dd>The content of the slot is vertically centered in the slot: the
    distance between the top margin edge of the anonymous block and the top
    of the slot is equal to the distance between the bottom margin edge of
    the anonymous block and the bottom of the slot. <span class=note>(Note
    that if the content overflows the slot, it will overflow both at the top
    and at the bottom.)</span>

   <dt>baseline

   <dd>The anonymous block that encloses the content is placed as high as
    possible under two constraints:
    <ol>
     <li>The top margin edge of the anonymous block may not be higher than
      the top edge of the slot.

     <li>The topmost baseline in the content may not be higher than the
      topmost baseline of content in any other slot in the same row that also
      has &lsquo;<code class=css>vertical-align: baseline</code>&rsquo;.
      Baselines of content inside floats are not taken into account. Slots
      that span several rows are considered to occur in their topmost row.
    </ol>
  </dl>

  <p>For all other values, the content is top aligned: the top margin edge of
   the anonymous box coincides with the top edge of the slot.

  <h2 id=conformance><span class=secno>7. </span> Conformance</h2>

  <h3 id=conventions><span class=secno>7.1. </span> Document conventions</h3>

  <p>Conformance requirements are expressed with a combination of descriptive
   assertions and RFC 2119 terminology. The key words “MUST”, “MUST
   NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
   “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
   normative parts of this document are to be interpreted as described in RFC
   2119. However, for readability, these words do not appear in all uppercase
   letters in this specification.

  <p>All of the text of this specification is normative except sections
   explicitly marked as non-normative, examples, and notes. <a
   href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>

  <p>Examples in this specification are introduced with the words “for
   example” or are set apart from the normative text with
   <code>class="example"</code>, like this:

  <div class=example>
   <p>This is an example of an informative example.</p>
  </div>

  <p>Informative notes begin with the word “Note” and are set apart from
   the normative text with <code>class="note"</code>, like this:

  <p class=note>Note, this is an informative note.

  <h3 id=conformance-classes><span class=secno>7.2. </span> Conformance
   classes</h3>

  <p>Conformance to <var class=replaceme>CSS TEMPLATE Module</var> is defined
   for three conformance classes:

  <dl>
   <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
    sheet</dfn>

   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
    style sheet</a>.

   <dt><dfn id=renderer>renderer</dfn>

   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
    that interprets the semantics of a style sheet and renders documents that
    use them.

   <dt><dfn id=authoring-tool>authoring tool</dfn>

   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
    that writes a style sheet.
  </dl>

  <p>A style sheet is conformant to <var class=replaceme>CSS TEMPLATE
   Module</var> if all of its statements that use syntax defined in this
   module are valid according to the generic CSS grammar and the individual
   grammars of each feature defined in this module.

  <p>A renderer is conformant to <var class=replaceme>CSS TEMPLATE
   Module</var> if, in addition to interpreting the style sheet as defined by
   the appropriate specifications, it supports all the features defined by
   <var class=replaceme>CSS TEMPLATE Module</var> by parsing them correctly
   and rendering the document accordingly. However, the inability of a UA to
   correctly render a document due to limitations of the device does not make
   the UA non-conformant. (For example, a UA is not required to render color
   on a monochrome monitor.)

  <p>An authoring tool is conformant to <var class=replaceme>CSS TEMPLATE
   Module</var> if it writes style sheets that are syntactically correct
   according to the generic CSS grammar and the individual grammars of each
   feature in this module, and meet all other conformance requirements of
   style sheets as described in this module.

  <h3 id=partial><span class=secno>7.3. </span> Partial implementations</h3>

  <p>So that authors can exploit the forward-compatible parsing rules to
   assign fallback values, CSS renderers <strong>must</strong> treat as
   invalid (and <a
   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
   appropriate</a>) any at-rules, properties, property values, keywords, and
   other syntactic constructs for which they have no usable level of support.
   In particular, user agents <strong>must not</strong> selectively ignore
   unsupported component values and honor supported values in a single
   multi-value property declaration: if any value is considered invalid (as
   unsupported values must be), CSS requires that the entire declaration be
   ignored.

  <h3 id=experimental><span class=secno>7.4. </span> Experimental
   implementations</h3>

  <p>To avoid clashes with future CSS features, the CSS2.1 specification
   reserves a <a
   href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
   syntax</a> for proprietary and experimental extensions to CSS.

  <p>Prior to a specification reaching the Candidate Recommendation stage in
   the W3C process, all implementations of a CSS feature are considered
   experimental. The CSS Working Group recommends that implementations use a
   vendor-prefixed syntax for such features, including those in W3C Working
   Drafts. This avoids incompatibilities with future changes in the draft.

  <h3 id=testing><span class=secno>7.5. </span> Non-experimental
   implementations</h3>

  <p>Once a specification reaches the Candidate Recommendation stage,
   non-experimental implementations are possible, and implementors should
   release an unprefixed implementation of any CR-level feature they can
   demonstrate to be correctly implemented according to spec.

  <p>To establish and maintain the interoperability of CSS across
   implementations, the CSS Working Group requests that non-experimental CSS
   renderers submit an implementation report (and, if necessary, the
   testcases used for that implementation report) to the W3C before releasing
   an unprefixed implementation of any CSS features. Testcases submitted to
   W3C are subject to review and correction by the CSS Working Group.

  <p>Further information on submitting testcases and implementation reports
   can be found from on the CSS Working Group's website at <a
   href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
   Questions should be directed to the <a
   href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
   mailing list.

  <h3 id=cr-exit-criteria><span class=secno>7.6. </span> CR exit criteria</h3>

  <p class=issue>[Change or remove the following CR exit criteria if the spec
   is not a module, but, e.g., a Note or a profile. This text was <a
   href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on
   2008-06-04.</a>]

  <p> For this specification to be advanced to Proposed Recommendation, there
   must be at least two independent, interoperable implementations of each
   feature. Each feature may be implemented by a different set of products,
   there is no requirement that all features be implemented by a single
   product. For the purposes of this criterion, we define the following
   terms:

  <dl>
   <dt>independent

   <dd>each implementation must be developed by a different party and cannot
    share, reuse, or derive from code used by another qualifying
    implementation. Sections of code that have no bearing on the
    implementation of this specification are exempt from this requirement.

   <dt>interoperable

   <dd>passing the respective test case(s) in the official CSS test suite,
    or, if the implementation is not a Web browser, an equivalent test. Every
    relevant test in the test suite should have an equivalent test created if
    such a user agent (UA) is to be used to claim interoperability. In
    addition if such a UA is to be used to claim interoperability, then there
    must one or more additional UAs which can also pass those equivalent
    tests in the same way for the purpose of interoperability. The equivalent
    tests must be made publicly available for the purposes of peer review.

   <dt>implementation

   <dd>a user agent which:
    <ol class=inline>
     <li>implements the specification.

     <li>is available to the general public. The implementation may be a
      shipping product or other publicly available version (i.e., beta
      version, preview release, or “nightly build”). Non-shipping product
      releases must have implemented the feature(s) for a period of at least
      one month in order to demonstrate stability.

     <li>is not experimental (i.e., a version specifically designed to pass
      the test suite and is not intended for normal usage going forward).
    </ol>
  </dl>

  <p>The specification will remain Candidate Recommendation for at least six
   months.

  <h2 class=no-num id=acknowledgments> Acknowledgments</h2>

  <p><var class=replaceme>[acknowledgments]</var>

  <h2 class=no-num id=references> References</h2>

  <h3 class=no-num id=normative-references> Normative references</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS21>[CSS21]

   <dd>Bert Bos; et al. <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
    Sheets Level 2 Revision 1 (CSS&#160;2.1) Specification.</cite></a> 7 June
    2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
    </dd>
   <!---->

   <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]

   <dd>Elika J. Etemad; Koji Ishii; Shinyu Murakami. <a
    href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/"><cite>CSS
    Writing Modes Module Level 3.</cite></a> 1 September 2011. W3C Working
    Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/">http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/</a>
    </dd>
   <!---->

   <dt id=CSS3BOX>[CSS3BOX]

   <dd>Bert Bos. <a
    href="http://www.w3.org/TR/2007/WD-css3-box-20070809"><cite>CSS basic box
    model.</cite></a> 9 August 2007. W3C Working Draft. (Work in progress.)
    URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-box-20070809">http://www.w3.org/TR/2007/WD-css3-box-20070809</a>
    </dd>
   <!---->

   <dt id=CSS3PAGE>[CSS3PAGE]

   <dd>H&#229;kon Wium Lie; Melinda Grant. <a
    href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:
    Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
    </dd>
   <!---->

   <dt id=CSS3TBL>[CSS3TBL]

   <dd>Bert Bos; David Hyatt. <cite>CSS3 Tables Module.</cite> (forthcoming).
    W3C Working Draft. (Work in progress.)</dd>
   <!---->

   <dt id=RFC2119>[RFC2119]

   <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
    words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
    RFC 2119. URL: <a
    href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <h3 class=no-num id=other-references> Other references</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS1>[CSS1]

   <dd>H&#229;kon Wium Lie; Bert Bos. <a
    href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style
    Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C
    Recommendation. URL: <a
    href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a>
    </dd>
   <!---->

   <dt id=CSS3COLOR>[CSS3COLOR]

   <dd>Tantek &#199;elik; Chris Lilley; L. David Baron. <a
    href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
    Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
    </dd>
   <!---->

   <dt id=CSS3UI>[CSS3UI]

   <dd>Tantek &#199;elik. <a
    href="http://www.w3.org/TR/2004/CR-css3-ui-20040511"><cite>CSS3 Basic
    User Interface Module.</cite></a> 11 May 2004. W3C Candidate
    Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2004/CR-css3-ui-20040511">http://www.w3.org/TR/2004/CR-css3-ui-20040511</a>
    </dd>
   <!---->

   <dt id=MEDIAQ>[MEDIAQ]

   <dd>H&#229;kon Wium Lie; et al. <a
    href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/"><cite>Media
    Queries.</cite></a> 27 July 2010. W3C Candidate Recommendation. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/">http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/</a>
    </dd>
   <!---->

   <dt id=WCAG20>[WCAG20]

   <dd>Ben Caldwell; et al. <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/"><cite>Web Content
    Accessibility Guidelines (WCAG) 2.0.</cite></a> 11 December 2008. W3C
    Recommendation. URL: <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211/</a>
    </dd>
   <!---->
  </dl>
  <!--end-informative-->

  <h2 class=no-num id=index> Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>&lsquo;<code class=css> </code>
    <ul>
     <li>slot()&rsquo;, <a href="#slot0"
      title="'', slot()''"><strong>5.</strong></a>
    </ul>

   <li>anonymous block of a slot, <a href="#anonymous-block"
    title="anonymous block of a slot"><strong>3.7.</strong></a>

   <li>authoring tool, <a href="#authoring-tool"
    title="authoring tool"><strong>7.2.</strong></a>

   <li>block dimension, <a href="#block-dimension"
    title="block dimension"><strong>1.7.</strong></a>

   <li>&lsquo;<code class=css>center</code>&rsquo;, <a href="#center"
    title="''center''"><strong>6.1.</strong></a>, <a href="#center0"
    title="''center''"><strong>6.1.</strong></a>

   <li>default slot., <a href="#default-slot."
    title="default slot."><strong>3.6.</strong></a>

   <li>display, <a href="#display0" title=display><strong>3.</strong></a>

   <li>&lsquo;<code class=css>end</code>&rsquo;, <a href="#end"
    title="''end''"><strong>6.1.</strong></a>, <a href="#end0"
    title="''end''"><strong>6.1.</strong></a>

   <li>flow, <a href="#flow0" title=flow><strong>4.1.</strong></a>

   <li>grid, <a href="#grid" title=grid><strong>3.5.</strong></a>

   <li>&lsquo;<a href="#grid"><code class=css>grid</code></a>&rsquo;, <a
    href="#value-def-display--grid" title="''grid''"><strong>3.</strong></a>

   <li>grid ancestor, <a href="#grid-ancestor"
    title="grid ancestor"><strong>3.</strong></a>

   <li>grid cell, <a href="#grid-cell"
    title="grid cell"><strong>2.</strong></a>

   <li>grid-column, <a href="#grid-column"
    title=grid-column><strong>4.2.</strong></a>

   <li>grid-column-align, <a href="#grid-column-align"
    title=grid-column-align><strong>6.1.</strong></a>

   <li>grid-columns, <a href="#grid-columns"
    title=grid-columns><strong>3.3.</strong></a>

   <li>grid element, <a href="#grid-element"
    title="grid element"><strong>2.</strong></a>, <a href="#grid-element0"
    title="grid element"><strong>3.</strong></a>, <a href="#grid-element1"
    title="grid element"><strong>3.</strong></a>

   <li>Grid line, <a href="#grid-line"
    title="Grid line"><strong>2.</strong></a>

   <li>grid-position, <a href="#grid-position0"
    title=grid-position><strong>4.3.</strong></a>

   <li>grid-row, <a href="#grid-row" title=grid-row><strong>4.2.</strong></a>
    

   <li>grid-row-align, <a href="#grid-row-align"
    title=grid-row-align><strong>6.1.</strong></a>

   <li>grid-rows, <a href="#grid-rows"
    title=grid-rows><strong>3.4.</strong></a>

   <li>grid-template, <a href="#grid-template"
    title=grid-template><strong>3.2.</strong></a>

   <li>Grid track, <a href="#grid-track"
    title="Grid track"><strong>2.</strong></a>

   <li>horizontal, <a href="#horizontal-element."
    title=horizontal><strong>1.7.</strong></a>

   <li>horizontal element, <a href="#horizontal-element."
    title="horizontal element"><strong>1.7.</strong></a>

   <li>horizontal writing mode, <a href="#horizontal-writing-mode"
    title="horizontal writing mode"><strong>1.7.</strong></a>

   <li>implicit template, <a href="#implicit-template"
    title="implicit template"><strong>3.2.</strong></a>

   <li>inline dimension, <a href="#inline-dimension"
    title="inline dimension"><strong>1.7.</strong></a>

   <li>&lsquo;<code class=css>inline-grid</code>&rsquo;, <a
    href="#value-def-display-inline-grid"
    title="''inline-grid''"><strong>3.</strong></a>

   <li>&lt;minmax&gt;, <a href="#ltminmaxgt"
    title="&lt;minmax&gt;"><strong>3.3.</strong></a>

   <li>multi-column element., <a href="#multi-column-element."
    title="multi-column element."><strong>1.7.</strong></a>

   <li>number of columns, <a href="#number-of-columns"
    title="number of columns"><strong>3.</strong></a>

   <li>number of rows, <a href="#number-of-rows"
    title="number of rows"><strong>3.</strong></a>

   <li>renderer, <a href="#renderer" title=renderer><strong>7.2.</strong></a>
    

   <li>slot, <a href="#slot" title=slot><strong>3.2.</strong></a>

   <li>start, <a href="#start" title=start><strong>6.</strong></a>, <a
    href="#start0" title=start><strong>6.</strong></a>

   <li>&lsquo;<a href="#start0"><code class=css>start</code></a>&rsquo;, <a
    href="#start1" title="''start''"><strong>6.1.</strong></a>, <a
    href="#start2" title="''start''"><strong>6.1.</strong></a>

   <li>&lsquo;<code class=css>stretch</code>&rsquo;, <a href="#stretch"
    title="''stretch''"><strong>6.1.</strong></a>, <a href="#stretch0"
    title="''stretch''"><strong>6.1.</strong></a>

   <li>style sheet
    <ul>
     <li>as conformance class, <a href="#style-sheet"
      title="style sheet, as conformance class"><strong>7.2.</strong></a>
    </ul>

   <li>&lt;track-size&gt;, <a href="#lttrack-sizegt"
    title="&lt;track-size&gt;"><strong>3.3.</strong></a>

   <li>vertical, <a href="#vertical-element"
    title=vertical><strong>1.7.</strong></a>

   <li>vertical element, <a href="#vertical-element"
    title="vertical element"><strong>1.7.</strong></a>

   <li>vertical writing mode, <a href="#vertical-writing-mode"
    title="vertical writing mode"><strong>1.7.</strong></a>

   <li>writing-mode, <a href="#writing-mode"
    title=writing-mode><strong>1.7.</strong></a>
  </ul>
  <!--end-index-->

  <h2 class=no-num id=property-index> Property index</h2>
  <!--begin-properties-->

  <table class=proptable>
   <thead>
    <tr>
     <th>Property

     <th>Values

     <th>Initial

     <th>Applies&nbsp;to

     <th>Inh.

     <th>Percentages

     <th>Media

   <tbody>
    <tr>
     <th><a class=property href="#display0">display</a>

     <td>&hellip; | grid | inline-grid

    <tr>
     <th><a class=property href="#flow0">flow</a>

     <td>auto | &lt;identifier&gt; | &lsquo;*&rsquo;

     <td>auto

     <td>elements with &lsquo;position&rsquo; equal to &lsquo;static&rsquo;
      or &lsquo;relative&rsquo;

     <td>no

     <td>no

     <td>N/A

    <tr>
     <th><a class=property href="#grid">grid</a>

     <td>none | [ [ &lt;string&gt; [ / &lt;row-height&gt; ]? ]+ ]
      &lt;col-width&gt;*

     <td>none

     <td>block container elements [CSS21]

     <td>no

     <td>see individual properties

     <td>see individual properties

    <tr>
     <th><a class=property href="#grid-column-align">grid-column-align</a>

     <td>&lsquo;start&rsquo; | &lsquo;end&rsquo; | &lsquo;center&rsquo; |
      &lsquo;stretch&rsquo;

     <td>&lsquo;stretch&rsquo;

     <td>Grid Item elements

     <td>no

     <td>n/a

     <td>visual, paged

    <tr>
     <th><a class=property href="#grid-columns">grid-columns</a>

     <td>auto | &lt;track-size&gt;+

     <td>auto

     <td>block container elements [CSS21]

     <td>no

     <td>yes, between grids with the same number of tracks

     <td>N/A

    <tr>
     <th><a class=property href="#grid-position0">grid-position</a>

     <td>auto | &lt;identifier&gt; | &lsquo;*&rsquo; | &lt;grid-track&gt; /
      &lt;grid-track&gt;

     <td>auto

     <td>elements with &lsquo;position: absolute&rsquo;

     <td>no

     <td>no

     <td>N/A

    <tr>
     <th><a class=property href="#grid-row">grid-row</a>, <a class=property
      href="#grid-column">grid-column</a>

     <td>auto | &lt;identifier&gt; | &lsquo;*&rsquo; | &lt;grid-track&gt;

     <td>auto

     <td>elements with &lsquo;position: absolute&rsquo;

     <td>no

     <td>no

     <td>N/A

    <tr>
     <th><a class=property href="#grid-row-align">grid-row-align</a>

     <td>&lsquo;start&rsquo; | &lsquo;end&rsquo; | &lsquo;center&rsquo; |
      &lsquo;stretch&rsquo;

     <td>&lsquo;stretch&rsquo;

     <td>Grid Item elements

     <td>no

     <td>n/a

     <td>visual, paged

    <tr>
     <th><a class=property href="#grid-rows">grid-rows</a>

     <td>auto | &lt;track-size&gt;+

     <td>auto

     <td>block container elements [CSS21]

     <td>no

     <td>yes, between grids with the same number of tracks

     <td>N/A

    <tr>
     <th><a class=property href="#grid-template">grid-template</a>

     <td>none | &lt;string&gt;+

     <td>none

     <td>block container elements [CSS21]

     <td>no

     <td>no

     <td>N/A
  </table>
  <!--end-properties-->
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->
